How to add new attributes to Material UI Shadows | Typescript

user_12133234 0
Viewed 684

enter image description hereI am trying to customize the Material UI types for shadow, but getting the below error when I try to use it in my code.

Tuple type Shadows of length 25 has no element at index 25.

I have tried many solutions but none helped. Below is what I have tried:

I have a index.d.ts file defined at root level and adding the declare module to customize the shadow property of Mui theme.

declare module '@material-ui/core/styles/shadows' {
  type Shadows = [
    {
      a1: string;
      a2: string;
      a3: string;
    }
  ];
}
material-ui typescript reactjs
2 Answers

Hi you can customize any of shadow using ES6 spread operator.

const theme = createMuiTheme({
  shadows: [...createMuiTheme({}).shadows.map((shadow, i) => (
    i === 1 ? '0 0 18px 0 rgba(9, 32, 46, 0.2)' : shadow
  ))],
});
user_70788050

If I understand correctly, you want to add one additional customized shadow to your theme. I had a similar issue and solve the problem via the following codes:

The basic idea is that you need to put the original 25 shadows (index 0 - 24) in the "shadows" array, and then create an additional one after these 25 original shadows.

const theme = createMuiTheme({
  shadows: [...createMuiTheme({}).shadows, "0px 4px 20px 5px rgba(0, 0, 0, 0.30)"],
});

In this case the new shadow is added to the shadows array (with index 25).

Then you can apply this new shadow to your mui component via:

<Box sx={{boxShadow: "25"}}>

Same logic can be used to create 26th, 27th ... showdows

user_101610960
Related