Javascript 材质ui中的CSS变量-CreateMuiteme

我正在尝试使用css变量定义的现有颜色创建材质ui主题

my pallette.scss

：

:root {
  --primary-color: '#FF0000';
  ...
}

这样使用：

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

export const muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: 'var(--primary-color)',
    },
  },
});

const cssVariables = {
  primaryColor: getComputedStyle(document.documentElement).getPropertyValue('var(--primary-color)'),
};

这会引发一个错误：

未捕获错误：物料界面：不支持的

var（--原色）

color。 我们支持以下格式：#nnn、#nnnnn、rgb（）、rgba（）、hsl（）、hsla（）

根据这个Github线程：目前不支持这个

是否有任何解决方法，以便我可以在材质ui

CreateMuiteme

中使用

var（-primary color）

作为primary颜色

最终目标是以最简单的形式使用材质ui组件，它们的主、副等颜色被“我的颜色”覆盖

<Radio color="primary" />

并使用cssVariables.primaryColor，但这不起作用，感觉非常违反直觉

---

我的最后一个解决方案是将调色板复制为一个普通对象并按原样使用，但这对于维护来说似乎是一场噩梦。

难看的解决方法可行，但我怀疑您在模块范围内调用

getComputedStyle（）

，而样式表可能尚未初始化

尝试像这样将其放入渲染方法中

const[theme，setTheme]=React.useState（null）；
React.useLayoutEffect（（）=>{
const color=getComputedStyle（document.documentElement）
.getPropertyValue（“--您的css颜色”）
.trim（）；//结果有一个前导空格。
设定主题(
创造博物馆({
调色板：{
主要：{
主营：颜色
}
}
})
);
}, []);

现场演示