Solve Warning: The elevation provided <Paper elevation={24}> is not available in the theme.

 

If you got the following warning:

 

The elevation provided <Paper elevation={24}> is not available in the theme. Please make sure that `theme.shadows[24]` is defined

 

In order to mitigate this, you can change your shadows to a dictionary instead of array, for example:

 

const theme = createMuiTheme({
  shadows: {
    24: '0px 11px 15px -7px red,0px 24px 38px 3px red,0px 9px 46px 8px red',
  },
});

 

Or you can initialize shadows[24] with current existing item, for example:

 

const theme = createMuiTheme({
  shadows: [
    '0px 11px 15px -7px red,0px 24px 38px 3px red,0px 9px 46px 8px red',
  ],
});

theme.shadows[24] = theme.shadows[0];

 

Refereces:

https://github.com/mui-org/material-ui/issues/8289