Material UI中如何选取主题内的嵌套颜色配置？

核心原因 #

你当前用的字符串形式样式值，仅支持MUI内置预设的调色板属性映射（比如primary.main、background.paper这类官方定义好的路径），自己扩展添加到palette.background下的alert属于自定义嵌套属性，默认的自动映射规则不会覆盖这类自定义路径，所以直接写字符串key无法读取，才需要加平级字段做临时兼容。

正确实现方式 #

读取任意层级的自定义主题属性，最通用、不会出兼容问题的写法是用函数形式的样式值：函数入参会返回完整的主题实例，直接按照你在createTheme里定义的对象结构按路径取值即可，不需要额外加平级冗余字段。

修正后的组件样式代码 #

const buttonStyle: SxProps<Theme> = {
  '&:hover': {
    // 通过回调拿到完整theme对象，按定义的嵌套路径取值
    backgroundColor: (theme) => theme.palette.background.alert,
  },
};

修正后的主题定义（可删除临时兼容字段） #

export const darkTheme = createTheme(themeOptions, {
  palette: {
    mode: 'dark',
    background: {
      default: '#0B0E16',
      paper: '#1D1F2B',
      alert: '#373B38' // 自定义嵌套属性直接正常定义即可
    },
    // 删掉之前临时加的平级backgroundAlert兼容字段
  },
});

补充说明：这种回调拿theme的写法是全场景通用的，不管是在sx属性、styled封装组件还是全局主题覆写场景里，读取任意深度的自定义主题属性都可以用这个方式，取值路径和你定义主题时的对象结构完全一致，不会出现读取失败的问题。

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