Question

我为我的工具箱提供了一个自定义主题，并且正在使用createMuiTheme覆盖调色板，字体等。我试图缩小用于各种主题的主题对象中的shadow数组组件，默认情况下带有25个值。我只想在我的影子数组中提供两个选项以使事情简单。

当我将要支持阴影的两个值传递给数组时，我从MUI收到警告：

index.js:1437 Warning: Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.

因此，我通过为其他我不想设置值的其他阴影添加设置“ none”来解决此问题：

let theme = createMuiTheme({
  palette: {
    common: {
      black: "#000",
      white: "#fff",
      ...
    },
  typography: {
    fontFamily: opensans,
    ...
  },
  shadows: [
    `0px 0px 6px 0px ${hexa(grey[500], 0.25)}`,
    `0px 0px 6px 0px ${hexa(grey[500], 0.55)}`,
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
   etc...
  ]
});

这是不理想的，因为它使主题泛滥，开发人员将其作为参考来查看可用的东西，有没有办法解决？

我的理想状态是主题对象中的表示形式，如下所示，但没有控制台警告：

let theme = createMuiTheme({
  palette: {
    common: {
      black: "#000",
      white: "#fff",
      ...
    },
  typography: {
    fontFamily: opensans,
    ...
  },
  shadows: [
    `0px 0px 6px 0px ${hexa(grey[500], 0.25)}`,
    `0px 0px 6px 0px ${hexa(grey[500], 0.55)}`,
  ]
});

Answer 1

您可能会做类似的事情：

const makeTheme = () => {
  const original = createMuiTheme();
  return {
    ...original,
    // override shadows based on the original array
    shadows: original.shadows.map(() => 'none'),
  };
};

const theme = makeTheme();

Answer 2

实际上，您不应该这样做，因为这样做您正在删除材质 ui 给出的所有其他默认阴影，这会使某些组件以某种奇怪的方式运行，因为它不会找到阴影，因为你已经覆盖了它们。

更好的方法是在主题中添加另一个 customShadow 键，并将您的自定义阴影添加到它。这样您就不再覆盖随材质 ui 加载的默认阴影，并且所有使用这些阴影的组件都可以正常工作。

希望你能得到答案

使用createMuiTheme覆盖主题中的Material UI阴影数组值

2 个答案: