覆盖 MuiContainer 类时如何摆脱 Typescript 类型错误？

Question

我的应用包含两个文件：(https://codesandbox.io/s/react-ts-muicontainer-override-yywh2)

//index.tsx
import * as React from "react";
import { render } from "react-dom";
import { MuiThemeProvider } from "@material-ui/core/styles";
import { Button, Container, Typography } from "@material-ui/core";
import myTheme from "./myTheme";
function App() {
  return (
    <MuiThemeProvider theme={myTheme}>
      <Container>
        <Typography>
          <p>Some text</p>
        </Typography>
        <Button>dummy</Button>
      </Container>
    </MuiThemeProvider>
  );
}
const rootElement = document.getElementById("root");
render(<App />, rootElement);

//myTheme.ts
import { createMuiTheme } from "@material-ui/core/styles";
export default createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        backgroundColor: "red"
      }
    },
    MuiTypography: {
      root: {
        color: "green"
      }
    },
    MuiContainer: {
      root: {
        backgroundColor: "yellow"
      }
    }
  }
});

应用程序以黄色背景显示内容，这意味着我的主题覆盖了工作。但是，myTheme.ts 中的整个 MuiContainer 键带有红色下划线，并且错误显示：

类型参数 '{ MuiButton: { root: { backgroundColor: string; }; }; MuiTypography：{根：{颜色：字符串； }; }; MuiContainer：{根： { 背景颜色：字符串； }; }; }' 不可分配给类型 '覆盖'。 对象字面量只能指定已知属性，并且“覆盖”类型中不存在“MuiContainer”.ts(2345) createMuiTheme.d.ts(20, 3)：预期类型来自属性 'overrides' 在这里声明的类型为 'ThemeOptions'

确实，mui overrides.d.ts 中的接口 ComponentNameToClassKey 中似乎缺少 MuiContainer。但是，MuiContainer documentation 说：如果使用主题的 overrides 键，则需要使用以下样式表名称：MuiContainer。所以我认为密钥应该是正确的。

在这种情况下如何修复 typescript 类型检查？

Answer 1

要解决打字稿问题，您可以将 createMuiTheme 作为类型 any 进行快速解决。

import { createMuiTheme } from "@material-ui/core/styles";
export default (createMuiTheme as any)({        // Fixes the typescript warning.
overrides: {
    MuiButton: {
      root: {
        backgroundColor: "red"
      }
    },
    MuiTypography: {
      root: {
        color: "green"
      }
    },
    MuiContainer: {
      root: {
        backgroundColor: "yellow"
      }
    }
  }
})

我希望它有所帮助。谢谢！