reactjs - 如何覆盖主题中的 Material ui阴影

Question

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;

控制台中有一条警告说:警告: Prop 类型失败:Material-UI:此海拔 4 未在组件中实现。既然是一个包含 25 个元素的数组，应该怎么做？

Answer 1

阴影需要所有 25 个框阴影，因为默认情况下，material-ui 在组件内部使用了许多这些阴影。所以方法是提供所需的阴影，然后完成其余的以完成数组内的 25 box-shadows pass none。

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')
  ]

此处提供了 5 个阴影，其余 20 个将无。 Array(20).fill('none') 将生成一个包含 20 个元素的数组(在本例中为 none)，然后将此数组散布在阴影数组中。它会将数组中的 25 个元素相加。