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

Question

长话短说，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} >

withStyle我遵循使用Material-ui 文档中的装饰器的样式方法

CSS IN JS 及以上
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.0material-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）。然而到目前为止，我解决这些问题的运气并不好。

请帮忙！

Answer 1

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

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

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

下面是一个模板，展示了如何使用 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);