CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
user12133234
user12133234

Reputation: 411

How to add new attributes to Material UI Shadows | Typescript

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

Upvotes: 4

Views: 1563

Answers (3)

Gagik Navasatariyan
Gagik Navasatariyan

Reputation: 258

I don't think there is a way to change the shadow type in MUI a I had to overwrite the theme and replace my shadow I saw shadows.d.ts file and I didn't see any override method like others

Upvotes: 0

codingsnake99
codingsnake99

Reputation: 146

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

Upvotes: 0

Maqsood Ahmed
Maqsood Ahmed

Reputation: 2257

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

Upvotes: 1

Related Questions