How to override material ui shadows in the theme

user_11811960 0
Viewed 1838
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?

material-ui reactjs
2 Answers

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.

user_112222820

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 });
user_29020630
Related