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

Question

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

Answer 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.

EDIT:

As Dave pointed out, remember to cast if you're using TypeScript:

shadows: Array(25).fill('none') as Shadows