如何设置作为道具传递的 material-ui 图标的样式

Question

我正在编写一个自定义 Material UI React 组件，我想将其Icon作为道具传递。但是，我想在获得图标时对其进行样式设置，并将其设置为最小宽度和高度。

这是我正在尝试做的事情的简化版本。我想将 应用于iconStyle传入的图标，props.statusImage但不知道如何。

import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  iconStyle: {
    minWidth: 100,
    minHeight: 100
  }
});

function MyComponentWithIconProps(props) {
  const styles = useStyles();

  return <div>{props.statusImage}</div>;
}

MyComponentWithIconProps.propTypes = {
  statusImage: PropTypes.element
};

export default MyComponentWithIconProps;

我使用这样的组件

import {Done} from "@material-ui/icons";
<MyComponentWithIconProps statusImage={<Done/>}

代码沙盒：https : //codesandbox.io/s/jovial-fermi-dmb0p

我还尝试将提供Icon的Icon内容包装在另一个元素中并尝试对其进行样式设置。然而，这并没有奏效，而且似乎有点“hacky”。

Answer 1

主要有以下三种选择：

1. 传入图标的元素类型而不是元素（例如Done代替<Done/>），然后在className渲染元素时添加 （这是 Fraction 答案中的方法）。
2. 克隆元素以向其添加className道具。
3. 在父元素上放置一个类并定位适当的子类型（例如svg）。

方法一：

索引.js

import React from "react";
import ReactDOM from "react-dom";
import { Done } from "@material-ui/icons";
import MyComponentWithIconProps from "./MyComponentWithIconProps";

function App() {
  return (
    <div className="App">
      <MyComponentWithIconProps statusImage={Done} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

MyComponentWithIconProps.js

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  iconStyle: {
    minWidth: 100,
    minHeight: 100
  }
});

function MyComponentWithIconProps(props) {
  const styles = useStyles();
  const StatusImage = props.statusImage;
  return (
    <div>
      <StatusImage className={styles.iconStyle} />
    </div>
  );
}

MyComponentWithIconProps.propTypes = {
  statusImage: PropTypes.element
};

export default MyComponentWithIconProps;

方法二：

索引.js

import React from "react";
import ReactDOM from "react-dom";
import { Done } from "@material-ui/icons";
import MyComponentWithIconProps from "./MyComponentWithIconProps";

function App() {
  return (
    <div className="App">
      <MyComponentWithIconProps statusImage={<Done />} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

MyComponentWithIconProps.js

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";
import clsx from "clsx";

const useStyles = makeStyles({
  iconStyle: {
    minWidth: 100,
    minHeight: 100
  }
});

function MyComponentWithIconProps(props) {
  const styles = useStyles();
  const styledImage = React.cloneElement(props.statusImage, {
    // Using clsx to combine the new class name with any existing ones that may already be on the element
    className: clsx(styles.iconStyle, props.statusImage.className)
  });
  return <div>{styledImage}</div>;
}

MyComponentWithIconProps.propTypes = {
  statusImage: PropTypes.element
};

export default MyComponentWithIconProps;

方法三：

索引.js

import React from "react";
import ReactDOM from "react-dom";
import { Done } from "@material-ui/icons";
import MyComponentWithIconProps from "./MyComponentWithIconProps";

function App() {
  return (
    <div className="App">
      <MyComponentWithIconProps statusImage={<Done />} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

MyComponentWithIconProps.js

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  iconStyle: {
    "& > svg": {
      minWidth: 100,
      minHeight: 100
    }
  }
});

function MyComponentWithIconProps(props) {
  const styles = useStyles();
  return <div className={styles.iconStyle}>{props.statusImage}</div>;
}

MyComponentWithIconProps.propTypes = {
  statusImage: PropTypes.element
};

export default MyComponentWithIconProps;