MUI V5中如何通过CSS主题变量vars.palette获取十六进制色值？

要在使用CssVarsProvider的情况下获取调色板的原始十六进制色值，核心思路是直接访问未被CSS变量替换的原始调色板配置，以下是两种简洁可行的方法：

方法一：抽离独立的原始调色板常量 #

将调色板配置单独定义为常量，创建主题时引用该常量，需要直接获取色值时直接调用这个常量：

// 定义原始调色板常量
const rawPalette = {
  light: {
    text: {
      secondary: '#6b7280'
    }
  },
  dark: {
    text: {
      secondary: '#9ca3af'
    }
  }
};

// 创建MUI主题
const theme = createTheme({
  colorSchemes: {
    light: {
      palette: rawPalette.light
    },
    dark: {
      palette: rawPalette.dark
    }
  }
});

在组件中使用：

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

function MyComponent() {
  const { mode } = useColorScheme();
  // 直接获取十六进制色值
  const secondaryTextColor = rawPalette[mode].text.secondary;
  
  return <div css={{ color: secondaryTextColor }}>示例文本</div>;
}

方法二：在主题中挂载自定义调色板属性 #

如果不想单独抽离常量，可以在创建主题时将原始调色板挂载到主题的自定义属性上，后续通过useTheme访问：

const customPalette = {
  light: { text: { secondary: '#6b7280' } },
  dark: { text: { secondary: '#9ca3af' } }
};

const theme = createTheme({
  colorSchemes: {
    light: { palette: customPalette.light },
    dark: { palette: customPalette.dark }
  },
  // 将原始调色板挂载到主题的自定义属性
  customPalette
});

在组件中使用：

import { useTheme, useColorScheme } from '@mui/material/styles';

function MyComponent() {
  const theme = useTheme();
  const { mode } = useColorScheme();
  const secondaryTextColor = theme.customPalette[mode].text.secondary;
  
  return <div css={{ color: secondaryTextColor }}>示例文本</div>;
}

为什么之前的方法无效？ #

CssVarsProvider的核心作用就是将主题中的颜色值替换为CSS变量引用，因此theme.vars、theme.getCssVar以及经过处理后的theme.colorSchemes返回的都是CSS变量名（如var(--mui-palette-text-secondary)），而非原始十六进制值。只有直接访问未被该组件处理的原始配置，才能拿到真实色值。

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