如何为 Material UI Icon 应用白色？

【问题标题】：How I can apply white color for Material UI Icon?如何为 Material UI Icon 应用白色？
【发布时间】：2020-09-04 13:31:34
【问题描述】：

我需要白色铅笔图标，我愿意：

  <CreateIcon style={{ color: white[500] }} />

但 Material UI 中不存在“白色”https://material-ui.com/customization/color/#official-color-tool

如何使用白色？

【问题讨论】：

不使用css属性

标签： reactjs material-ui icons

【解决方案1】：

最简单的几种方法是：

<CreateIcon style={{ color: '#fff' }} />

或

const useStyles = makeStyles((theme) => ({
  white: {
    color: theme.palette.common.white,
  },
}

在您的组件中：

const classes = useStyles();
..
<CreateIcon className={classes.white}/>

【讨论】：

【解决方案2】：

你可以覆盖样式

const WhiteCreateIcon = withStyles({
  root: {
    color: "white"
  }
})(CreateIcon);

Codesandbox 演示

【讨论】：

【解决方案3】：

您可能已经知道，白色只有一种颜色 (#fff)。如果您想拥有不同的白色“阴影”，那么您可以使用灰色。

import grey from '@material-ui/core/colors/grey';

const useStyles = makeStyles((theme) => ({
  white: {
    color: grey[50],
  },
}

render() {
  const classes = useStyles();
  ...
  return <CreateIcon className={classes.white}/>;
}

【讨论】：