Búsqueda de sitios web

Cómo ampliar la definición de tema de Material UI 3 en Typescript con el tema de los selectores de Material UI

Intento extender el tema de Material-UI para incorporar los tipos de Typescript de Material-UI-Pickers, para las siguientes versiones (más recientes):

"@material-ui/core": "^3.9.2",
"material-ui-pickers": "^2.2.1",

Hay una mención en la parte inferior de la página del selector de Material UI, explicando que el tema puede ser aumentado gracias a la ampliación de temas de Typescript.

Se recomienda hacer esto:

declare module '@material-ui/core/styles/overrides' {
    import { MuiPickersOverrides } from 'material-ui-pickers/typings/overrides'
    export interface Overrides extends MuiPickersOverrides { }
}

Pero en el archivo Material UI override.d.ts, Overrides no es una interfaz sino un tipo (por lo que no será extensible de esta manera), lo que me hace pensar que las definiciones de tipos de Material-UI han cambiado drásticamente, y que la guía (y definiciones de tipos) de Material-UI-Pickers están desactualizadas.

¿Alguna idea sobre cómo extender correctamente los tipos del tema?

Respuesta #1

Encontré la solución. De hecho, MuiPickers utiliza un mapeo de nombre de propiedad -> reglas de estilo, mientras que las últimas versiones de Material UI usan un mapeo de nombre de propiedad -> nombres de clases.

Crear un archivo overrides-mui.d.ts que contenga lo siguiente resuelve el problema.

import { Overrides } from "@material-ui/core/styles/overrides";
import { MuiPickersOverrides } from 'material-ui-pickers/typings/overrides'

type overridesNameToClassKey = { [P in keyof MuiPickersOverrides]: keyof 
MuiPickersOverrides[P] }

declare module "@material-ui/core/styles/overrides" {
    export interface ComponentNameToClassKey extends overridesNameToClassKey { }
}

Los únicos problemas son con los selectores de estilo como &$selected.

Artículos relacionados