我的应用包含两个文件:( 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 键都带有红色下划线并且错误显示:

Argument of type '{ MuiButton: { root: { backgroundColor: string; }; }; MuiTypography: { root: { color: string; }; }; MuiContainer: { root: { backgroundColor: string; }; }; }' is not assignable to type 'Overrides'. Object literal may only specify known properties, and 'MuiContainer' does not exist in type 'Overrides'.ts(2345) createMuiTheme.d.ts(20, 3): The expected type comes from property 'overrides' which is declared here on type 'ThemeOptions'

确实，mui overrides.d.ts 中的 ComponentNameToClassKey 接口(interface)似乎缺少 MuiContainer。然而，MuiContainer documentation says: 如果使用主题的覆盖键，你需要使用下面的样式表名称:MuiContainer。所以我认为 key 应该是正确的。

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

最佳答案

从 ThemeOptions 传递一个扩展接口(interface)作为

interface ThemeType extends ThemeOptions {
  overrides: Object
}

对我来说很好用

https://stackoverflow.com/questions/57112766/