javascript - Cum să extinzi Mui 5 Typography cu proprietăți personalizate (TypeScript)

Încerc să adaug o proprietate personalizată componentului Typography de la Mui:

augmentarea modulului:

// mui.d.ts

declare module "@mui/material/Typography" {
  interface TypographyProps {
    opacity: string | number;
  }
}

configurație temă:

export const theme = createTheme({
  components: {
    MuiTypography: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          opacity: ownerState.opacity,
        }),
      },
    },
  },
 
});

În acest punct, totul funcționează bine... dar când încercăm să folosim noua proprietate opacity adăugată, ajungem la:

  Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { align?: "inherit" | "left" | "right" | "center" | "justify" | undefined; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...>): Element', gave the following error.
    Property 'component' is missing in type '{ children: string; opacity: number; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element', gave the following error.
    Type '{ children: string; opacity: number; }' is not assignable to type 'IntrinsicAttributes & SystemProps<Theme> & { align?: "inherit" | "left" | "right" | "center" | "justify" | undefined; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...>'.
      Property 'opacity' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { align?: "inherit" | "left" | "right" | "center" | "justify" | undefined; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...>'.ts(2769)
OverridableComponent.d.ts(21, 7): 'component' is declared here.```

Răspuns #1

Eroarea pe care o întâmpinați se datorează modului în care TypeScript și Material UI gestionează proprietățile personalizate în componenta Typography. Extinderea componentelor Material UI cu proprietăți personalizate în TypeScript necesită augmentarea modulului. Iată un ghid pas cu pas pentru a rezolva acest lucru:

Soluție: Extinderea MuiTypography cu proprietăți personalizate

Pentru a adăuga o proprietate personalizată precum opacity la componenta Typography în MUI 5, va trebui să folosești augmentarea modulelor. Iată cum să o faci:

1. Extinderea Modulului:

Creează sau modifică un fișier d.ts (de exemplu, mui.d.ts) și extinde interfața TypographyProps pentru a include proprietatea ta personalizată opacity:

// mui.d.ts
import { type TypographyOwnProps as MuiTypographyOwnProps } from '@mui/material/Typography';

declare module '@mui/material/Typography' {
  interface TypographyOwnProps extends MuiTypographyOwnProps {
    opacity?: string | number;
  }
}

Acest lucru extinde interfața TypographyProps astfel încât TypeScript să recunoască proprietatea opacity fără a genera o eroare de tipizare.

2. Configurarea temei:

Apoi, configurează tema MUI pentru a aplica valoarea opacității:

// theme.ts
import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  components: {
    MuiTypography: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          opacity: ownerState.opacity,
        }),
      },
    },
  },
});

În această etapă, totul ar trebui să funcționeze conform așteptărilor, iar proprietatea de opacitate va afecta stilizarea așa cum este intenționat.

3. Problema Rămasă: Prop Apărând în DOM

În ciuda faptului că totul funcționează vizual, vei întâlni un avertisment în consolă precum acesta:

React does not recognize the `opacity` prop on a DOM element.

Acest lucru se întâmplă deoarece opacity nu este un atribut HTML valid, totuși acesta este încă transmis către DOM, provocând ca React să se plângă.

Din păcate, MUI nu oferă în prezent o modalitate automată de a filtra proprietățile personalizate din DOM. Deși proprietatea aplică stilurile corecte, React o va reda totuși în DOM ca un atribut nerecunoscut și vei vedea avertizarea corespunzătoare în consolă. De exemplu, dacă transmiți opacity={0.8}, va fi redat ca:

<span opacity="0.8">Hello World</span>

Acest lucru nu este ideal, dar în acest moment nu există un mecanism încorporat în MUI pentru a împiedica transmiterea proprietăților personalizate către DOM.

Concluzie

În rezumat, configurarea de augmentare a modulului funcționează pentru stilizare și adăugarea de proprietăți personalizate în TypeScript, dar atributul opacity (și orice atribute personalizate similare) vor apărea în continuare în DOM, iar React va genera un avertisment. Această limitare rămâne până când este implementat un component personalizat sau o altă soluție pentru a preveni transmiterea proprietății către DOM.

Notă: Am adăugat de asemenea un comentariu la problema inițială aici, deoarece în prezent caut o modalitate de a împiedica redarea acestor proprietăți personalizate în DOM. Dacă vă confruntați cu o problemă similară, acest lucru ar putea fi relevant pentru dumneavoastră.

Anunță-mă dacă ai nevoie de clarificări suplimentare!