[FIXED] How to override material ui shadows in the theme

Issue

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?

Solution

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.

Answered By - Rajiv
Answer Checked By - - David Goodson (ReactFix Volunteer)