如何使用 Material UI 选择器主题扩展 Material UI 3 主题 Typescript 定义

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

但是在 Material UI override.d.ts 文件中，Overrides 不是 interface 而是 type（所以它不会可以通过这种方式进行扩展），这让我认为 Material-UI 类型发生了巨大变化，并且 Material-UI-Pickers 指南（和类型）已经过时了。 p>

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

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等样式选择器存在问题。