Material-UI主题覆盖中如何引用调色板？

很简单！你之所以没法直接在overrides里用palette.secondary.main，是因为定义overrides的时候，主题对象还没完全创建好。解决办法是把样式值改成接收theme参数的回调函数，这样就能在回调里访问到完整的调色板了。

直接看修改后的完整代码：

const theme = createMuiTheme({
  palette: {
    primary: { main: "black" },
    secondary: { main: "blue" }
  },
  overrides: {
    MuiTab: {
      root: {
        "&$selected": {
          // 用回调函数访问theme里的调色板
          backgroundColor: (theme) => theme.palette.secondary.main
        }
      }
    }
  }
});

关键说明： #

• 把原来硬编码的"blue"换成(theme) => theme.palette.secondary.main，这个函数会在主题创建完成后被调用，传入完整的theme对象
• 这样做的核心好处是颜色统一管理：后续如果要修改secondary的主色，只需要改palette里的值，overrides里的样式会自动同步，不用逐个修改硬编码的颜色
• 这种回调方式同样适用于其他需要访问theme属性的场景，比如字体、间距、阴影等

内容的提问来源于stack exchange，提问作者nagy.zsolt.hun