如何重写Material UI Bottom Navigation底部导航组件的图标颜色

解决方案 #

你当前样式不生效是因为MUI的SVG图标有独立的默认样式规则，优先级高于你写的类选择器，可采用以下两种方案解决：

• 方案一：直接提升选择器精准度覆盖样式，修改CSS代码如下：

/* 未选中状态的图标和文字颜色 */
.MuiBottomNavigationAction-root .MuiSvgIcon-root {
    color: #007A78;
}
/* 选中状态的图标和文字颜色 */
.MuiBottomNavigationAction-root.Mui-selected .MuiSvgIcon-root,
.MuiBottomNavigationAction-root.Mui-selected {
    color: #007A78;
}

如果还有优先级不够的情况，可以在颜色属性后加!important强制覆盖：color: #007A78 !important;

• 方案二：如果使用MUI主题定制方案，直接在主题中配置更规范，无需写全局CSS覆盖：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiBottomNavigationAction: {
      styleOverrides: {
        root: {
          color: '#007A78',
          '&.Mui-selected': {
            color: '#007A78',
          }
        }
      }
    }
  }
});

将配置好的主题用ThemeProvider包裹应用根组件即可全局生效。

内容的提问来源于stack exchange，提问作者Daniel