如何自定义MaterialUI颜色阴影

Question

我了解在MaterialUI中，可以自定义主题以使用不同的颜色。

MaterialUI暴露的颜色具有不同的阴影。例如：

import purple from '@material-ui/core/colors/purple';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple,
    },
    secondary: {
      main: "#22B469",
      light: "rgb(78, 195, 135)",
      dark: "rgb(23, 125, 73)",
      contrastText: "#ffffff"
    },
  },
});

从console.log(theme)看，我们看到原色填充有阴影，而对于第二色则没有，因为第二色已被十六进制颜色代码覆盖。

在MaterialUI文档中，仅提及使用自定义十六进制颜色时使用light，main，dark和contrastText。

当然，我可以在secondary键下逐一添加这些阴影，但是这种解决方案看起来并不美观。

用十六进制代码覆盖主题颜色时的最佳实践是什么，有没有办法从自定义十六进制颜色自动生成阴影？

Answer 1

您可以在模块中制作自定义颜色here并将其导入。

const amber = {
  50: '#fff8e1',
  100: '#ffecb3',
  200: '#ffe082',
  300: '#ffd54f',
  400: '#ffca28',
  500: '#ffc107',
  600: '#ffb300',
  700: '#ffa000',
  800: '#ff8f00',
  900: '#ff6f00',
  A100: '#ffe57f',
  A200: '#ffd740',
  A400: '#ffc400',
  A700: '#ffab00'
};
const _default = amber;
exports.default = _default;

Answer 2

import purple from '@material-ui/core/colors/purple';
import indigo from '@material-ui/core/colors/indigo';


const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple,
    },
    secondary: {
      main: purple,
      light: "rgb(78, 195, 135)",
      dark: "rgb(23, 125, 73)",
      contrastText: "#ffffff",
      indigo: indigo  //<---------- do what you want
    },
  },
});

然后在您的样式定义中：

{...
root: {
   color: theme.palete.secondary.indigo[700],
},
...}