使用Material-UI在React中实现主题切换仅生效一次如何解决？

问题诱因 #

核心问题出在CssBaseline组件的样式注入逻辑：

• CssBaseline 仅会在首次挂载阶段，将当前主题对应的全局样式（包括body背景色、全局文字色等）注入到页面，后续只要组件没有重新挂载，就不会更新已注入的全局样式。
• 第一次切换到深色主题时，CssBaseline已经完成挂载，注入了深色主题的全局样式；后续你切回浅色主题时，旧的深色全局样式仍然残留在页面中，优先级高于浅色的默认样式，所以看起来主题没有切换，实际上你的light状态更新逻辑是完全正常的。

解决方案 #

方案1（最简单） #

给CssBaseline添加和主题状态绑定的key属性，每次主题切换时触发组件重新挂载，自动注入最新主题的全局样式即可：

<CssBaseline key={light} />

方案2 #

你也可以手动给根容器绑定主题对应的样式属性，完全不依赖CssBaseline的全局样式注入能力，从根源规避样式覆盖的问题。

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