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

Posted 2023-02-21

【中文标题】覆盖 MuiContainer 类时如何摆脱 Typescript 类型错误？

【英文标题】：How to get rid of Typescript type error when overriding MuiContainer classes?

【发布时间】：2019-11-28 11:11:54

【问题描述】：

我的应用包含两个文件：(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 类型检查？

【参考方案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"
      
    
  
)

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

【讨论】：

不是真正的修复，是吗？最好忽略您遇到的一个错误，而不是将来可能引入更多错误。