如何通过MUI ThemeProvider修改选中Toggle Button的颜色？

问题说明 #

使用React、TypeScript及@mui/material 5.11.13开发应用时，尝试通过ThemeProvider修改ToggleButton选中状态的颜色，但选中后按钮仍显示默认的palette.primary.main颜色#1976d2，自定义主题配置未生效。

解决方案 #

1. 确认ThemeProvider的包裹范围 #

确保所有使用ToggleButton的组件都被MuiThemeProvider完整包裹，避免嵌套其他ThemeProvider覆盖当前主题配置。

2. 提升自定义样式优先级 #

MUI默认的.Mui-selected样式优先级较高，可通过以下两种方式解决：

方式一：用!important强制覆盖样式

import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';

const muiTheme = createTheme({
  palette: {
    primary: {
      main: '#ff0000',
      dark: '#ff0000',
      contrastText: '#000000',
    },
  },
  components: {
    MuiToggleButton: {
      styleOverrides: {
        root: {
          '&.Mui-selected': {
            backgroundColor: '#ff0000 !important',
            color: '#000000 !important',
          },
          '&:hover': {
            backgroundColor: '#ff0000 !important',
            color: '#000000 !important',
          },
        },
      },
    },
  },
});

// 应用主题
<MuiThemeProvider theme={muiTheme}>
  {/* 你的业务组件 */}
</MuiThemeProvider>

方式二：使用MUI官方推荐的variants配置

通过variants直接针对selected: true的属性定义样式，无需!important即可获得更高优先级：

import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';

const muiTheme = createTheme({
  palette: {
    primary: {
      main: '#ff0000',
      dark: '#ff0000',
      contrastText: '#000000',
    },
  },
  components: {
    MuiToggleButton: {
      variants: [
        {
          props: { selected: true },
          style: {
            backgroundColor: '#ff0000',
            color: '#000000',
            '&:hover': {
              backgroundColor: '#ff0000',
            },
          },
        },
      ],
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: '#ff0000',
            color: '#000000',
          },
        },
      },
    },
  },
});

// 应用主题
<MuiThemeProvider theme={muiTheme}>
  {/* 你的业务组件 */}
</MuiThemeProvider>

3. 检查ToggleButton的color属性 #

如果ToggleButton设置了color="primary"等颜色属性，需确保主题中对应调色板的颜色已正确修改，或者在样式覆盖中明确覆盖该属性带来的默认样式。

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