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 the

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

consttheme=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

Solution 2:

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

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