具有相同样式的样式映射 Material-UI 图标 (React)答案

【问题标题】：Style Mapped Material-UI Icons with the Same Styles (React)具有相同样式的样式映射 Material-UI 图标 (React)
【发布时间】：2021-06-28 12:00:58
【问题描述】：

如果没有为每个带有 material-ui 图标元素的对象添加 className 或 style 标签，如果每个图标具有相同的样式，那么设置每个图标样式的最佳方法是什么？

const btns = [
  { name: "test1", icon: <Icon1 />, link: "test1" },
  { name: "test2", icon: <Icon2 />, link: "test2" },
  {
    name: "test3",
    icon: <Icon3 />,
    link: "test3",
  },
  { name: "test4", icon: <Icon4 />, link: "test4" },
  { name: "test5", icon: <Icon5 />, link: "test5" },
  { name: "test6", icon: <Icon6 />, link: "test6" },
  { name: "test7", icon: <Icon7 />, link: "test7" },
  { name: "test8", icon: <Icon8 /> },
];

const LeftNav = () => {
  const classes = useStyles();

  return (
    <div className="leftNavContainerStyle">
      {btns.map((btn) => {
        return (
          <Button className={classes.navBtnContainer} color="primary">
            {btn.icon} //add the same style to each icon.
            {btn.name}
          </Button>
        );
      })}
    </div>
  );
};

export default LeftNav;

我尝试将每个图标键更改为：{ name: "test1", icon: Icon1, link: "test1" }，然后将btn.icon 更改为<btn.icon/> 并添加类似<btn.icon style={styles}/> 的样式，但这会出错。

任何帮助将不胜感激！

【问题讨论】：

标签： reactjs material-ui icons

【解决方案1】：

您可以使用 React.cloneElement 函数，然后在它被克隆时传入样式。所以像这样的

{btns.map((btn) => {
    return (
        <Button className={classes.navBtnContainer} color="primary">
            {React.cloneElement(btn.icon, {
                // pass in any new props into this object
                className={...}
            })}
            {btn.name}
        </Button>
    );
})}

【讨论】：

【解决方案2】：

终于明白了，

import { SvgIcon } from "@material-ui/core"; //import SvgIcon


const btns = [
  { name: "test1", icon: Icon1, link: "test1" },//remove tags from icon components
  { name: "test2", icon: Icon2, link: "test2" },
  {
    name: "test3",
    icon: Icon3,
    link: "test3",
  },
  { name: "test4", icon: Icon4, link: "test4" },
  { name: "test5", icon: Icon5, link: "test5" },
  { name: "test6", icon: Icon6, link: "test6" },
  { name: "test7", icon: Icon7, link: "test7" },
  { name: "test8", icon: Icon8 },
];

const LeftNav = () => {
  const classes = useStyles();

  return (
    <div className="leftNavContainerStyle">
      {btns.map((btn) => {
        return (
          <Button className={classes.navBtnContainer} color="primary"> //use the component from SvgIcon
            <SvgIcon component={btn.icon} className="whateverclassyouwant" /> 
            {btn.name}
          </Button>
        );
      })}
    </div>
  );
};

export default LeftNav;

【讨论】：