如何更改.MuisvgIcon根类样式以覆盖material-ui react中的库中的新样式？

Question

我在create-react-app项目中将Material-ui用于UI组件。根据我的要求，我决定在仪表板应用程序中同时使用抽屉和App-bar组件。但是我在更改SVG图标的颜色时遇到问题。

在这里，截图是我真正想要更改的

这是我的工具栏代码：

 <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerOpen}
              edge="start"
              className={clsx(classes.menuButton, {
                [classes.hide]: open,
              })}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" noWrap>
              VOTTUN BLOCKCHAIN
            </Typography>
          </Toolbar>

我想将图标的颜色更改为白色。

我们该怎么做？

谢谢。

Answer 1

将颜色规则应用于classes.menuButton

const useStyles = makeStyles(theme => ({
  menuButton: {
    color: 'red'
  },
}));

您可以参考此Codesandbox working example

Answer 2

您可以通过应用CSS属性进行更改。 例如，

<div classname="drawer">
    <IconButton />

</div>

#css
.drawer > .MuiSvgIcon-root{
color:gray
}

（BEM命名）