React Material UI(v5+)无法使用light/dark之外的自定义配色方案？

你遇到的问题核心是MUI默认仅允许light和dark两种主题模式，自定义模式需要显式添加到允许列表中，否则setMode会忽略非默认模式的切换请求。

修复步骤： #

1. 确保自定义主题的mode与colorSchemes键名一致
   你的主题克隆方式没问题，但要保证thirdTheme.palette.mode的值和extendTheme中colorSchemes的键名完全相同（都是thirdTheme）。

2. 扩展主题配置，添加允许的自定义模式
   在extendTheme时，通过config.colorSchemes.allowedSchemes将自定义主题加入允许列表，这样setMode才会触发data-mui-color-scheme的更新：

import { extendTheme } from '@mui/material/styles';
import _ from 'lodash';

// 创建自定义主题
const defaultTheme = extendTheme();
const thirdTheme = _.cloneDeep(defaultTheme.colorSchemes.light);
_.merge(thirdTheme.palette, {
  background: { default: '#ff0000' },
});
thirdTheme.palette.mode = 'thirdTheme'; // 必须和colorSchemes的键名一致

// 扩展主题并配置允许的模式
const theme = extendTheme({
  colorSchemes: {
    thirdTheme,
  },
  config: {
    colorSchemes: {
      allowedSchemes: ['light', 'dark', 'thirdTheme'], // 添加自定义模式
    },
  },
});

3. 修正Button代码的语法错误
   你的Button标签结尾写错了，应该是</Button>而非</Button?，这个笔误可能导致组件渲染异常：

<Button
  onClick={() => {
    setMode(mode === 'thirdTheme' ? 'light' : 'thirdTheme');
  }}
>
  {mode === 'thirdTheme' ? 'Turn light' : 'Turn thirdTheme'}
</Button>

原理说明： #

MUI的useColorScheme钩子内部会校验模式是否在allowedSchemes列表中，默认只有light和dark。手动修改data-mui-color-scheme生效，说明主题的CSS变量已经正确注入，只是setMode的切换请求被默认校验拦截了。添加自定义模式到允许列表后，setMode就能正常更新DOM属性并切换主题。

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