Reactjs 如何覆盖主题中的材质ui阴影

控制台中有一条警告，说： 警告：失败的道具类型：材料界面：此标高

4

未在组件中实现。

---

既然它是一个25个元素的数组，那么应该怎么做呢？

阴影需要所有25个框阴影，因为默认情况下，“材质ui”在组件内部使用了许多这样的阴影。因此，方法是提供所需的阴影，然后完成其他阴影，以完成阵列过程中的

25

框阴影

none

import {
  createMuiTheme, responsiveFontSizes,
} from "@material-ui/core/styles";

let theme = createMuiTheme({
  palette: {
    primary: {
      main: "#000",
    },
    secondary: {
      main: "#ccc",
    },
  },
  typography: {
    fontFamily: "Roboto",
  },
  shadows: [
    "none",
    "0px 15px 60px rgba(0, 0, 0, 0.25)",
    "0px 35px 60px rgba(0, 0, 0, 0.25)",
    "20px 55px 60px rgba(0, 0, 0, 0.25)",
    "10px 15px 60px rgba(0, 0, 0, 0.25)",
  ],
});

theme = responsiveFontSizes(theme);

export default theme;

这里提供了5个阴影，其余20个为

none

<代码>数组（20）.fill（'none'）将生成一个包含20个元素的数组（本例中为无元素），然后将该数组分散到阴影数组中。数组中总共有25个元素

shadows: [
    "none",
    "0px 15px 60px rgba(0, 0, 0, 0.25)",
    "0px 35px 60px rgba(0, 0, 0, 0.25)",
    "20px 55px 60px rgba(0, 0, 0, 0.25)",
    "10px 15px 60px rgba(0, 0, 0, 0.25)",
    ...Array(20).fill('none')
  ]