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

Posted 2023-02-26

我正在编写一个自定义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”。​​

答案

有三种主要选择：

1. 传递图标的元素类型而不是元素（例如，Done而不是<Done/>），然后在渲染元素时添加className（这是Fraction的回答）。
2. 克隆元素以便向其添加className属性。
3. 在父元素上放置一个类，并指定适当的子类型（例如svg）。

方法1：

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

---

方法2：

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

---

方法3：

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

另一答案

我会这样：

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;

另一答案

像这样传递图标：

<MyComponentWithIconProps statusImage=Done />

然后按如下所示使用它：

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