样式映射材质 - UI 具有相同样式的图标 (React)

Question

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

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}/> 的样式，但这会出错。

如有任何帮助，我们将不胜感激！

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

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

样式映射材质 - UI 具有相同样式的图标 (React)

Style Mapped Material-UI Icons with the Same Styles (React)

reactjs

material-ui

icons