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

shadows requires all 25 box-shadows since material-ui uses many of these shadows internally inside the components by default. so the way is to provide the shadows needed and then to complete the rest other for completing 25 box-shadows inside the array pass none.

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)",
    ...Array(20).fill('none')
  ]

Here 5 shadows are provided and rest 20 will be none. Array(20).fill('none') will produce an array of 20 elements (none in this case) and then spreading this array inside the shadows array. It'll sum up to 25 elements inside the array.

Answer 2

extending on @rajiv's answer with typescript...

If you're using getDesignTokens() or anything else where the error says any[] doesn't match ["none", string, ...] use the following:

import { Shadows } from "@mui/material";

  shadows: [
    "none",
    "0px 0px 0px 0px rgba(0, 0, 0, 0)",
    "0px 2px 2px 0px rgba(0, 0, 0, 0.25)",
    "0px 6px 8px 0px rgba(0, 0, 0, 0.25)",
    "0px 15px 52px 15px rgba(50, 59, 82, 0.15)",
    ...Array(20).fill("none"),
  ] as Shadows,