如何为 Material UI 图标应用白色？

Question

我需要白色铅笔图标，我这样做：

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

但是 Material UI https://material-ui.com/customization/color/#official-color-tool

中不存在“白色”

如何使用白色？

Answer 1

您可以覆盖样式

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

Codesandbox 演示

Answer 2

最简单的两种方法是：

1)

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

或

2)

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

在你的组件中：

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

Answer 3

您可能已经知道，白色只有一种颜色 (#fff)。如果你想要不同的 'shade' 白色，你可以使用灰色，如果这就是你的意思。

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}/>;
}

如何为 Material UI 图标应用白色？

How I can apply white color for Material UI Icon?

icons

reactjs

material-ui