React Material UI ThemeProvider自定义主题部分样式未生效排查求助

问题原因 #

• <CssBaseline /> 放在了<ThemeProvider />外部，该组件会全局重置html、body的默认样式，放在外部时只会读取MUI默认主题的背景色#fafafa，即使你的div背景设置正确，只要div高度没有铺满整个视口，body的默认背景就会暴露，看起来样式未生效。
• useStyles钩子在App组件顶层调用，此时App组件还未进入<ThemeProvider />的上下文作用域，makeStyles默认读取的是MUI全局默认主题配置，而非你自定义的darkTheme，导致最终渲染时背景色取值错误。

解决方法 #

调整组件结构，将<CssBaseline />和所有使用MUI主题的逻辑都放在<ThemeProvider />内部，你可以抽离子组件来避免上下文读取错误，修改后的代码如下：

调整后的App组件代码 #

const Content = () => {
  const classes = useStyles();
  return <div className={classes.root}>hello</div>
}

const App = () => {
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <Content />
    </ThemeProvider>
  );
};

如果调整结构后仍有高度适配问题，可以在全局样式中补充如下配置，确保div的100%高度规则生效：

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

其他原有配置无需改动，调整后主题即可正常生效。

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