Material-UI: the shadows array provided to createMuiTheme should support 25 elevations

问题

I'm trying to get rid of shadows in the Material-UI theme.

I found this answer here with fixed the problem. However I get the error message in the title of this question.

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

Error:

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

I found this solution, but the answer was not helpful: https://github.com/mui-org/material-ui/issues/8289

回答1:

It looks like it expects your Theme to have at least 25 shadows, in order to create the progression seen in Material UI. While I certainly don't recommend removing the shadows if you're trying to follow Material UI standards, one easy way to do it might just be to set all levels of elevation to 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')
});

This should fulfill the requirement.

回答2:

I honestly think the best way to do this is to use overrides. Depending on which box shadow you want to remove.

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'
      }
    }
  }  
});

来源：https://stackoverflow.com/questions/50516398/material-ui-the-shadows-array-provided-to-createmuitheme-should-support-25-elev

标签

javascript

material-design

material-ui