具有矩形背景的材质 UI 图标答案

【问题标题】：Material IU icon with rectangle background具有矩形背景的材质 UI 图标
【发布时间】：2020-05-14 15:01:26
【问题描述】：

我找不到任何关于如何创建具有矩形背景的图标的文档，如下所示： <Icon /> 或 <SvgIcon /> 没有任何道具可以开箱即用。我可以自己设置它们的样式，但想知道是否有现成的方式。

【问题讨论】：

你查到答案了吗？

【解决方案1】：

您可以使用useStyles 为您的元素添加颜色：

const useStyles = makeStyles(theme => ({
  root: {
    "& > svg": {
      margin: theme.spacing(1)
    }
  },
  icon1: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    borderRadius: theme.shape.borderRadius
  },
  icon2: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.text.primary,
    borderRadius: theme.shape.borderRadius
  },
  icon3: {
    backgroundColor: theme.palette.text.primary,
    color: theme.palette.primary.contrastText,
    borderRadius: theme.shape.borderRadius
  },
  icon4: {
    backgroundColor: theme.palette.text.secondary,
    color: theme.palette.primary.contrastText,
    borderRadius: theme.shape.borderRadius
  }
}));

在你的图标里面：

<div className={classes.root}>
  <AddIcon fontSize="large" color="primary" className={classes.icon1} />
  <AddIcon fontSize="large" color="primary" className={classes.icon2} />
  <AddIcon fontSize="large" color="primary" className={classes.icon3} />
  <AddIcon fontSize="large" color="primary" className={classes.icon4} />
</div>

这是一个工作示例：https://codesandbox.io/s/mui-icons-styling-8t4rb?file=/demo.js

【讨论】：

我知道我可以自己设计它们。我的困惑可能是因为他们通常会为他们的演示提供示例代码。图标页面显示了非常有前途的演示，没有显示它们是如何实现的代码。