Material-UI Next自定义主题未生效问题求助

看起来你配置主题时踩了几个常见的小坑，我帮你逐一排查修复：

1. 主题配置结构错误 #

你直接把appBar放在了主题的根层级，但Material-UI的主题系统里，这类组件样式配置需要放在指定的层级下，框架才能识别到：

修正后的主题配置（分版本） #

如果你用的是MUI v4及之前版本：

import { createMuiTheme } from '@material-ui/core/styles';
import red from '@material-ui/core/colors/red';

const theme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: {
      light: red[300],
      main: red[500],
      dark: red[700],
    },
  },
  // 把AppBar样式放到overrides下的MuiAppBar节点里
  overrides: {
    MuiAppBar: {
      root: {
        height: 55,
      },
    },
  },
});

如果你用的是MUI v5版本：

import { createTheme } from '@mui/material/styles';
import red from '@mui/material/colors/red';

const theme = createTheme({
  palette: {
    mode: 'dark', // v5用mode替代了旧版的type
    primary: {
      light: red[300],
      main: red[500],
      dark: red[700],
    },
  },
  // v5用components节点配置组件自定义样式
  components: {
    MuiAppBar: {
      styleOverrides: {
        root: {
          height: 55,
        },
      },
    },
  },
});

2. 确认主题Provider的正确导入与使用 #

要确保Provider和你的MUI版本匹配，并且完整包裹整个应用：

MUI v4版本： #

import { MuiThemeProvider } from '@material-ui/core/styles';

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        {/* 你的所有应用内容都要放在这里面 */}
      </MuiThemeProvider>
    );
  }
}

MUI v5版本： #

import { ThemeProvider } from '@mui/material/styles';

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        {/* 你的所有应用内容都要放在这里面 */}
      </ThemeProvider>
    );
  }
}

3. 确保组件正确引用主题样式 #

比如你在styles函数里要使用主题的主色调，得这样写：

const styles = (theme) => ({
  sampleButton: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
  },
});

4. 清除缓存并重启开发服务器 #

有时候旧的主题缓存会导致修改不生效，试试重启你的React开发服务器，或者清空浏览器缓存后刷新页面。

按上面的步骤调整后，你的红色主色调和自定义高度的AppBar应该就能正常生效啦！

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