如何设置作为道具传递的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. 传入图标的元素类型而不是元素（例如，用$ swipl -q -s temp.pl -g main pat is the parent of jim $ 代替Done），然后在渲染元素时添加<Done/>（这是方法）分数的答案。）
2. 克隆该元素以向其添加className道具。
3. 在父元素上放置一个类，并定位适当的子类型（例如className）。

方法1：

index.js

svg

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);

---

方法2：

index.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;

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);

---

方法3：

index.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;

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);

Answer 2

像这样传递图标：

<MyComponentWithIconProps statusImage={Done} />

然后按以下方式使用它：

return <div><props.statusImage className={styles.iconStyle} /></div>;

Answer 3

我会这样：

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

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

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

  return <div className={styles.iconStyle}>{props.statusImage}</div>;
}

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

export default MyComponentWithIconProps;

Answer 4

就我而言，这是工作：

Index.js

import {Done} from "@material-ui/icons";

<MyComponentWithIconProps icon={<Done {/*with some props*/}/>}/>

MyComponentWithIconProps.js

return (<div >{props.icon}</div>); 

CodeSanbox