Reactjs 如何定制MaterialUI颜色阴影

我知道在MaterialUI中，可以自定义主题以使用不同的颜色

MaterialUI暴露的颜色有不同的色调。例如：

从“@material ui/core/colors/purple”导入紫色；
const theme=createMuiTheme({
调色板：{
主要：{
主旋律：紫色，
},
中学：{
主要内容：“22B469”，
灯光：“rgb（78195135）”，
黑暗：“rgb（23125,73）”，
对比文本：“ffffff”
},
},
});

查看

console.log（theme）

，我们看到原色中填充了阴影，但次色中没有阴影，因为颜色已被十六进制颜色代码覆盖

在MaterialUI文档中，仅提到在使用自定义十六进制颜色时使用

浅

、

主

、

暗

、和

对比文本

当然，我可以在

secondary

键下逐个添加这些阴影，但这个解决方案看起来并不优雅

---

当使用十六进制代码覆盖主题颜色时，最佳做法是什么？是否有方法从自定义十六进制颜色自动生成阴影？

您可以在模块中生成自定义颜色并导入它

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
    },
  },
});

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;

---

您可以在模块中生成自定义颜色并将其导入

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;

---

你把紫色放在primary:main上，为什么不在secondary:main上做同样的事情呢？我把颜色放在

main

上，因为文档中就是这样描述的。对于secondary，我使用的是定制的十六进制颜色，而不是我可以从材质内置颜色导入的颜色…您在primary:main上添加紫色，为什么不在secondary:main上添加相同的颜色呢？我将颜色添加到

main

中，因为文档中对此进行了描述。对于第二种，我使用的是自定义十六进制颜色，而不是可以从材质内置颜色导入的颜色。。。