How to override material ui shadows in the theme

Question

import {
  createMuiTheme, responsiveFontSizes,
} from "@material-ui/core/styles";

let theme = createMuiTheme({
  palette: {
    primary: {
      main: "#000",
    },
    secondary: {
      main: "#ccc",
    },
  },
  typography: {
    fontFamily: "Roboto",
  },
  shadows: [
    "none",
    "0px 15px 60px rgba(0, 0, 0, 0.25)",
    "0px 35px 60px rgba(0, 0, 0, 0.25)",
    "20px 55px 60px rgba(0, 0, 0, 0.25)",
    "10px 15px 60px rgba(0, 0, 0, 0.25)",
  ],
});

theme = responsiveFontSizes(theme);

export default theme;

There is a warning in the console saying: Warning: Failed prop type: Material-UI: This elevation 4 is not implemented in the component. How should it be done, since it is an array of 25 elements?

Answer 1

Typescript is still screaming at me after trying Rajiv's answer. I propose a solution in the docs, to create a theme and extend after that.

let theme = createTheme();
const shadows = theme.shadows;
shadows[1] = 'my custom shadow';
shadows[2] = 'my custom shadow 2';
theme = createTheme({ shadows });