MUI 组件的类型中缺少 Typescript Material UI 属性“类”

IT技术 reactjs typescript material-ui
2021-05-24 05:44:20

长话短说，typescript抱怨property classes每个 material-ui 组件缺失。换句话说，Typescript 强制该classes属性存在于几乎每个 material-ui 组件中。这是使用 webpack 编译期间的错误消息ts-loader，

我有以下代码，

头文件.tsx

import AppBar from 'material-ui/AppBar';
import * as React from 'react';
import { withStyles } from 'material-ui/styles/index';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';

const decorate = withStyles((theme) => ({
  header: {
    paddingTop: theme.spacing.unit,
    width: '100%',
  },
}));

const AppBarTypographyStyle = {
  color: 'white',
  fontSize: '1.6rem',
};

const Header = decorate(({classes}) => (
  <header>
    <AppBar position="static" classes={{root: classes.header}}>
      <Toolbar>
        <Typography style={AppBarTypographyStyle} classes={{}} color="inherit" type="title">
            OLIVE
        </Typography>
      </Toolbar>
    </AppBar>
  </header>
));

export default Header;

我有Toolbar以下消息的错误

TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & ToolbarProps & { children?: ReactNode; }'.
  Type '{ children: Element; }' is not assignable to type 'ToolbarProps'.
    Property 'classes' is missing in type '{ children: Element; }'

对于AppBar和Typography我加入，我不接受错误classes property与定义我的风格function decorator和一个空的对象; 但是，不可能只使用 style & className properties

<AppBar position="static" style={exampleStyleObj} className={exampleClass} >

我遵循使用withStylematerial-ui doc 中的装饰器的样式方法

CSS IN JS & Over
https://material-ui-next.com/customization/css-in-js/

覆盖
https://material-ui-next.com/customization/overrides/

Typescript Material-UI 指南
https://material-ui-next.com/guides/typescript/

我正在使用，typescript@2.4.0 material-ui@1.0.0-beta.21

我检查过是否有相同的问题并在其他地方回答，甚至检查了 material-ui 源代码，发现以下内容，

/**
 * All standard components exposed by `material-ui` are `StyledComponents` with
 * certain `classes`, on which one can also set a top-level `className` and inline
 * `style`.
 */
export type StandardProps<C, ClassKey extends string, Removals extends keyof C = never> =
  & Omit<C & { classes: any }, 'classes' | Removals>
  & StyledComponentProps<ClassKey>
  & {
    className?: string;
    style?: Partial<React.CSSProperties>;
  }

这StandardProps是最ComponentProps interface扩展的（例如，AppBarProps）。但是到目前为止，我没有多少运气来解决这些问题。

请帮忙！

2个回答

在 TypeScript 4 中，现在对 Material UI 的withStyle HOC有了很好的支持。

但是您已使用导出组件export default withStyles(styles)(YourComponent)，否则 TypeScript 仍会抱怨：

TS2741：“{}”类型缺少属性“classes”，但“Props”类型需要。

这是一个模板，展示了如何使用 TypeScript 4 完成它：

import React from 'react';
import {createStyles, Theme, withStyles, WithStyles} from '@material-ui/core';

const styles = (theme: Theme) =>
  createStyles({
    // ...
  });

interface Props extends WithStyles<typeof styles> {}

const YourComponent: React.FC<Props> = (props: Props): JSX.Element => {
  const {classes} = props;
  return (
    // ...
  );
};

export default withStyles(styles)(YourComponent);

我想回答我的问题。感谢来自 material-ui gitter 的Tom Crockett。

2.4.0由于 material-ui 组件的类型差异，使用 Typescript将不起作用。但是，2.4.2补丁可以解决这个问题。

其它你可能感兴趣的问题
上一篇指定自定义 DrawerNavigator 标头 下一篇动态改变react模式内容