如何从 React Material UI 中的基色创建颜色变体？

Question

我的主题中有一个给定的颜色常量，比如说“#FFBA60”。

我想使用 React Material UI 函数从其他一些基本颜色中派生出来。（假设一个亮 30%，一个暗 10%）。

有这个功能吗？（类似于 Sass brighten('#FFBA60,30%)）

Answer 1

material-ui/styles 中有一个变暗功能。

import { darken } from '@material-ui/core/styles';
const darkenedColor50Percent = darken('#4f4', 0.5);

Answer 2

对于 MUI v.5

import {darken} from "@mui/material/styles";

...

color: darken(theme.palette.primary.main, 0.125),

Answer 3

material-ui 主题自己做，你只需要传递主色，它会以主色为基础计算其他颜色。这是文档中的一个示例：

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

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      // dark: will be calculated from palette.secondary.main,
      contrastText: '#ffcc00',
    },
    // Used by `getContrastText()` to maximize the contrast between
    // the background and the text.
    contrastThreshold: 3,
    // Used by the functions below to shift a color's luminance by approximately
    // two indexes within its tonal palette.
    // E.g., shift from Red 500 to Red 300 or Red 700.
    tonalOffset: 0.2,
  },
});

这里是文档链接

如果您尝试为自定义属性生成颜色，该theme.palette.augmentColor()函数也可以自定义设置。这里是代码的链接，包含它接受的所有属性

所述CodeSandbox示例（只是路过主色）