CODEWITHSUNDEEP
reactjsmaterial-ui
DragoJokera
DragoJokera

Reputation: 1035

How to override material ui shadows in the theme

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?

Upvotes: 4

Views: 6297

Answers (3)

kevin
kevin

Reputation: 3488

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,

Upvotes: 3

alextrastero
alextrastero

Reputation: 4280

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

Upvotes: 1

Rajiv
Rajiv

Reputation: 3772

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.

Upvotes: 10

Related Questions