Material ui 中的 CSS 变量 - createMuiTheme答案

【问题标题】：CSS variables in Material ui - createMuiThemeMaterial ui 中的 CSS 变量 - createMuiTheme
【发布时间】：2021-01-03 01:30:26
【问题描述】：

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

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

并像这样使用它：

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

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

这会引发错误：

未捕获的错误：Material-UI：不支持 var(--primary-color) 颜色。我们支持以下格式：#nnn、#nnnnnn、rgb()、rgba()、hsl()、hsla()。

根据这个 Github 帖子：Support CSS variables as theme option 目前不支持。

是否有任何解决方法，以便我可以将var(--primary-color) 用作材质ui createMuiTheme 中的primary 颜色？

最终目标是以最简单的形式使用材质 ui 组件，其主要、次要等颜色被我的颜色覆盖。

<Radio color="primary" />

我尝试过像这样使用托盘中的颜色：

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

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

我的最后一个解决方案是将调色板复制作为普通对象使用，但这似乎是维护的噩梦。

【问题讨论】：

标签： javascript material-ui css-variables

【解决方案1】：

丑陋的解决方法有效，但我怀疑您在样式表可能尚未初始化时在模块范围内调用 getComputedStyle()。

试着像这样把它放在渲染方法中。

const [theme, setTheme] = React.useState(null);

React.useLayoutEffect(() => {
  const color = getComputedStyle(document.documentElement)
    .getPropertyValue("--your-css-color")
    .trim(); // the result have a leading whitespace.

  setTheme(
    createMuiTheme({
      palette: {
        primary: {
          main: color
        }
      }
    })
  );
}, []);

现场演示

【讨论】：

【解决方案2】：

NearHuscarl 发布的解决方法可以完成工作，但调色板更改会导致闪烁。这可以通过useState 中的延迟初始化来避免。

const cssVar = (name: string) =>
  getComputedStyle(document.documentElement).getPropertyValue(name).trim();

const App: React.FC = () => {
  const [theme] = useState(() =>
    createTheme({
      palette: {
        primary: {
          main: cssVar("--color-primary"),
          light: cssVar("--color-primary-light"),
          dark: cssVar("--color-primary-dark"),
          bg: cssVar("--color-primary-bg"),
          contrastText: cssVar("--color-primary-contrast-text"),
        },
      },
    })
  );

  return (
    <ThemeProvider theme={theme}>
      <YourApp />
    </ThemeProvider>
  );
};

【讨论】：

【解决方案3】：

从主题选项设置颜色可能更有效。使用这种方法，您可以将材质 ui 颜色定义为 css 变量。

import React, { useEffect } from 'react'
import { createTheme, ThemeProvider } from '@mui/material/styles'

import { indigo, amber } from '@mui/material/colors'
const themeOptions = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: amber[600] },
    background: { default: '#F3F6F9' },
  },
})
const colorKeys = ['background', 'common', 'error', 'grey', 'info', 'primary', 'secondary', 'success', 'text', 'warning']
const r = document.querySelector(':root')
const AppThemeProvider = ({ children }) => {
  useEffect(() => {
    colorKeys.forEach((color) => {
      const themeColorObj = themeOptions.palette[color]
      for (const key in themeColorObj) {
        if (Object.hasOwnProperty.call(themeColorObj, key)) {
          const colorVal = themeColorObj[key]
          r.style.setProperty(`--color-${color}-${key}`, colorVal)
        }
      }
    })
  }, [])
  return <ThemeProvider theme={themeOptions}>{children}</ThemeProvider>
}
export default AppThemeProvider

通过这种方式，您可以将 css 变量用作 sass 或 common css。

.dx-link-edit {
  color: var(--color-primary-main);}

【讨论】：