Question

我正试图摆脱Material-UI主题中的阴影。

我发现了answer here with fixed the problem。但是我在这个问题的标题中收到了错误消息。

const theme = createMuiTheme({
  palette: {
    primary: {
      light: red[300],
      main: red[500],
      dark: red[700]
    },
    secondary: {
      light: red.A200,
      main: red.A400,
      dark: red.A700
    }
  },
  shadows: ['none']
});

错误：

browser.js：49警告：Material-UI：为createMuiTheme提供的阴影数组应该支持25个高程。

我找到了这个解决方案，但答案没有帮助： https://github.com/mui-org/material-ui/issues/8289

Answer 1

看起来它希望你的主题至少有25个阴影，以便创建在Material UI中看到的进展。虽然如果您尝试遵循Material UI标准，我当然不建议删除阴影，但一种简单的方法可能就是将所有级别的高程设置为none。

const theme = createMuiTheme({
  palette: {
    primary: {
      light: red[300],
      main: red[500],
      dark: red[700]
    },
    secondary: {
      light: red.A200,
      main: red.A400,
      dark: red.A700
    }
  },
  shadows: Array(25).fill('none')
});

这应符合要求。

Answer 2

老实说，做到这一点的最佳方法是使用覆盖。取决于要删除的框阴影。

const theme = createMuiTheme({
  palette: {
    primary: {
      light: red[300],
      main: red[500],
      dark: red[700]
    },
    secondary: {
      light: red.A200,
      main: red.A400,
      dark: red.A700
    }
  },
  overrides: {
    MuiAppBar: {
      root: {
        'box-shadow':'none'
      }
    }
  }  
});

Material-UI：为createMuiTheme提供的阴影数组应该支持25个高程

2 个答案: