reactjs - Hvordan man tilføjer nye attributter til Material UI Shadows | Typescript

Jeg prøver at tilpasse Material UI-typerne for skygge, men får nedenstående fejl, når jeg prøver at bruge det i min kode.

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

Jeg har prøvet mange løsninger, men ingen hjalp. Nedenfor er, hvad jeg har prøvet:

Jeg har en index.d.ts-fil defineret på rodt niveau og tilføjer declare module for at tilpasse skyggens egenskab i Mui-temaet.

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

Svar #1

Hej, du kan tilpasse enhver skygge ved hjælp af ES6 spread-operatoren.

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

Svar #2

Hvis jeg forstår det korrekt, vil du tilføje en ekstra tilpasset skygge til dit tema. Jeg havde et lignende problem og løste det via følgende koder:

Den grundlæggende idé er, at du skal lægge de oprindelige 25 skygger (indeks 0 - 24) i "shadows"-arrayet, og derefter oprette en ekstra efter disse 25 oprindelige skygger.

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

I dette tilfælde tilføjes den nye skygge til skyggematricen (med indeks 25).

Derefter kan du anvende denne nye skygge på din MUI-komponent via:

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

Samme logik kan bruges til at skabe 26., 27. ... skygger

Relaterede artikler