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

2024-05-19 • 问答

我在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>

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

我们该怎么做？

谢谢。

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

将颜色规则应用于classes.menuButton

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

您可以参考此Codesandbox working example

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

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

</div>

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

（BEM命名）

material-ui reactjs

本文链接：https://www.f2er.com/3161567.html

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

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

大家都在问