MUI自定义组件变体适配明暗模式如何直接引用主题调色板颜色

出于代码可读性考虑，通常会把传入createTheme函数的components配置对象拆分到单独文件维护（组件往往包含大量自定义变体配置），如果项目同时需要适配亮色/暗色双模式，很容易遇到配置引用调色板的痛点。

双模式下常规的设计令牌定义写法如下：

const getDesignTokens = (mode: PaletteMode) => ({
  palette: {
    mode,
    ...(mode === 'light'
      ? {
          // 亮色模式调色板配置
          primary: amber,
          divider: amber[200],
          text: {
            primary: grey[900],
            secondary: grey[800],
          },
        }
      : {
          // 暗色模式调色板配置
          primary: deepOrange,
          divider: deepOrange[700],
          background: {
            default: deepOrange[900],
            paper: deepOrange[900],
          },
          text: {
            primary: '#fff',
            secondary: grey[500],
          },
        }),
  },
});

定义完设计令牌后，一般会根据当前选中的亮/暗模式生成对应的主题实例。

核心痛点：把组件主题配置抽离后，如果不把组件配置包装成接收当前模式/调色板为参数的函数，就没法直接使用主题内的调色板颜色。期望实现类似sx属性的自动引用效果——比如写sx={{ backgroundColor: 'button.background' }}时，框架会自动从主题读取对应配置值，不需要手动传参。
虽然把每个组件配置包装成接收参数的函数可以实现需求，但写法冗余，想找更简洁的方案。

当前冗余实现写法 #

const dashedVariants = (palette) => ({
  props: {variant: 'dashed'},
  style: {
    border: `1px dashed ${palette.dashColor}`
  }
})

const Button = (palette) => ({
  styleOverrides: {},
  variants: [dashedVariants(palette)]
})

期望实现效果 #

不需要包装函数，静态配置即可直接引用调色板值：

const dashedVariants = {
  props: {variant: 'dashed'},
  style: {
    border: `1px dashed palette.dashColor` // 寻找类似的直接引用写法
  }
}

MUI 没有给静态主题配置提供类似sx的字符串路径自动解析能力，不用全量套函数，有两种更简洁的实现思路：

• 优先用官方原生支持的回调写法，零额外成本：不管是styleOverrides还是自定义variants里的style字段，都支持传入回调函数，回调参数里直接能拿到当前完整的theme对象。你不需要把整个组件配置都包成函数，只在需要取主题值的样式层写回调即可。
  改造后的代码如下：

  const dashedVariants = {
    props: { variant: 'dashed' },
    // 仅在用到主题值的style字段写回调，直接从参数拿theme取值
    style: ({ theme }) => ({
      border: `1px dashed ${theme.palette.dashColor}`
    })
  }
  
  const Button = {
    styleOverrides: {
      // styleOverrides下的样式字段同理，也支持回调拿theme
      root: ({ theme }) => ({
        color: theme.palette.text.primary
      })
    },
    variants: [dashedVariants]
  }
  

  这种写法下抽离的组件配置本身还是静态对象，不需要在生成主题的时候一层层透传palette参数，比全量包函数的写法清爽很多，也不会出现双模式切换样式不更新的问题。
• 如果实在不想写回调，可以自定义简单的递归解析工具：给配置里需要引用主题值的地方加统一标记（比如@palette.dashColor），在传入createTheme之前基于当前生成的theme对象把所有标记替换成真实值。不过这种自定义逻辑需要自己处理边界情况，稳定性不如原生回调写法，非特殊需求不推荐。

注意：不要在静态配置里硬编码亮/暗两套固定颜色值，切换模式时这类硬编码样式不会自动更新，反而增加维护成本。

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