时间戳

首页 > 解决方案 > 如何覆盖主题中的材质ui阴影

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

问题描述

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;

控制台中有一条警告说：警告：失败的道具类型：Material-UI：4组件中未实现此高度。应该怎么做，因为它是一个包含 25 个元素的数组？

标签： reactjsmaterial-ui

解决方案

shadows 需要所有 25 个 box-shadows，因为 material-ui 默认在组件内部使用许多这些阴影。所以方法是提供所需的阴影，然后完成其余部分，以完成25数组 pass 中的 box-shadows 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 个none。Array(20).fill('none')将生成一个包含 20 个元素的数组（在这种情况下没有），然后将该数组传播到 shadows 数组中。它将在数组中总计 25 个元素。

推荐阅读