javascript - Material ui 中的 CSS 变量 - createMuiTheme

Question

我正在尝试使用定义为 css 变量 my-pallette.scss 的现有颜色创建 Material ui 主题:

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

并像这样使用它:

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

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

这会引发错误:

Uncaught Error: Material-UI: Unsupported var(--primary-color) color.We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().

根据这个 Github 线程: Support CSS variables as theme option目前不受支持。
是否有任何解决方法，以便我可以使用 var(--primary-color)作为 初级 Material ui 中的颜色 createMuiTheme ?
最终目标是以最简单的形式使用 Material ui 组件及其 。主要、次要等 颜色被我的颜色覆盖。

<Radio color="primary" />

我尝试过使用托盘中的颜色，如下所示:

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

并使用 cssVariables.primaryColor但这不起作用并且感觉非常违反直觉。
我的最后一个解决方案是 重复 调色板作为普通对象使用，但这似乎是维护的噩梦。

Answer 1

MUI 团队目前正在研究一种支持 CSS 变量的解决方案。您可以跟踪进度here和 here想法的细节。