Как расширить определение Typescript темы пользовательского интерфейса с помощью темы выбора пользовательского интерфейса материала

Я пытаюсь расширить тему Material-UI, чтобы включить типизацию Typescript для Material-UI-Pickers для следующих (последних) версий:

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

В нижней части страницы выбора пользовательского интерфейса для материала есть упоминание о том, что тема может быть расширена благодаря расширению Typescript Theme.

Он рекомендует сделать это:

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

Но в интерфейсе материалов override.d.ts файл, Overrides это не интерфейс, а тип (таким образом, он не будет расширяемым таким образом), что заставляет меня думать, что типизации Material-UI кардинально изменились, и что руководство (и наборы) для Material-UI-Pickers устарели.

Любая подсказка о том, как правильно расширить набор текста темы?

Источник

1 ответ

Нашел решение. Действительно, в MuiPickers используется сопоставление правил имени свойства -> стиля, тогда как в последних версиях Material UI используется сопоставление имен свойств -> классов.

Создание overrides-mui.d.ts файл, который содержит следующее, решает проблему.

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 { }
}

Только проблемы с селекторами стиля, такими как &$selected,

Источник
Другие вопросы по тегам