Question

我尝试扩展 Material-UI 主题以合并 Material-UI-Pickers 的 Typescript 类型，以下内容（最新）版本：

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

Material UI picker页的底部有一个提及，解释了由于Typescript Theme augmentation可以增强主题。

建议这样做：

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 指南（和类型）是过时的。

关于如何正确扩展主题类型的任何线索吗？

Answer 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）存在问题。

如何使用Material UI Pickers主题扩展Material UI主题Typescript定义

1 个答案: