typescript - 如何使用 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 指南(和打字)已过时。

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

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。