MUI明暗主题切换时部分组件未响应的问题求助

各位大佬好！我最近在项目里基于MUI做明暗主题切换功能，参考了官方关于深色模式配置和手动切换主题的相关文档来开发。我的核心需求是支持三种主题模式的手动切换：亮色模式、暗色模式，以及跟随系统主题模式，而且切换后主题要能正确响应系统的主题设置变化。

不过现在遇到了个头疼的问题：切换主题模式时，项目里大部分组件都能正常跟着更新样式，但有一部分组件完全不响应主题变化，样式始终停留在切换前的状态。我自己排查了好一阵也没找到根因，想请教下各位有没有遇到过类似情况，或者能给我一些排查方向？

先简单说下目前的实现情况：

• 已经按照文档要求配置了基于模式的设计令牌，用useMemo根据当前mode动态生成主题
• 实现了切换主题的状态管理，点击切换按钮能正常更新mode状态
• 尝试过给不响应的组件加key强制刷新，但还是没效果
• 不响应的组件里既有我自己封装的自定义组件，也有个别MUI原生组件

给大家贴一段我当前主题配置的简化代码片段：

// 生成主题令牌的函数
const getDesignTokens = (mode) => ({
  palette: {
    mode,
    primary: {
      main: mode === 'dark' ? '#2196f3' : '#1976d2',
    },
    background: {
      default: mode === 'dark' ? '#121212' : '#f5f5f5',
    },
  },
});

// 自定义主题提供者组件
const AppThemeProvider = ({ children }) => {
  const [themeMode, setThemeMode] = useState('system');
  // 监听系统主题变化
  const systemMode = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light';
  const currentMode = themeMode === 'system' ? systemMode : themeMode;
  const theme = useMemo(() => createTheme(getDesignTokens(currentMode)), [currentMode]);

  // 切换主题的方法
  const handleThemeChange = (newMode) => {
    setThemeMode(newMode);
  };

  return (
    <ThemeProvider theme={theme}>
      {children}
      {/* 主题切换控件 */}
      <FormControl component="fieldset">
        <RadioGroup
          value={themeMode}
          onChange={(e) => handleThemeChange(e.target.value)}
        >
          <FormControlLabel value="light" control={<Radio />} label="亮色模式" />
          <FormControlLabel value="dark" control={<Radio />} label="暗色模式" />
          <FormControlLabel value="system" control={<Radio />} label="跟随系统" />
        </RadioGroup>
      </FormControl>
    </ThemeProvider>
  );
};

目前我的几个疑问点：

• 是不是有些组件没有正确消费ThemeProvider传递的主题？比如自定义组件里直接写了固定颜色值，而没有用theme里的变量？
• 有没有可能是主题的更新没有正确触发组件的重渲染？
• 对于跟随系统模式的情况，系统主题变化时部分组件不响应，是不是监听系统主题的逻辑有问题？

麻烦各位大佬帮忙分析下，感谢感谢！

内容来源于stack exchange