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

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

0 голосов
/ 21 февраля 2019

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

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

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

Рекомендуется сделать следующее: 

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

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

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

1 Ответ

0 голосов
/ 26 февраля 2019

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

Создание файла 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.

...