Как изменить стили класса .MuisvgIcon-root для переопределения новых стилей из библиотеки в реагировании материала-интерфейса?

Question

Я использую Material-ui для компонентов пользовательского интерфейса в моем create-react-app проекте. В соответствии с моим требованием я решил использовать компонент «Панель» и «Панель приложения» вместе в приложении на приборной панели. Но у меня есть проблема с изменением цвета значка 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

Применение правила цвета к классам. MenuButton

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

Вы можете обратиться к этому рабочему примеру Codesandbox