Question

长话短说，打字稿抱怨每个材料-ui组件上缺少property classes。换句话说， Typescript强制classes属性几乎存在于每个材料组件中。这是使用ts-loader，

进行webpack编译时的错误消息

我有以下代码，

Header.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中定义的样式和一个空对象;但是 JUST USE style & className properties

是不可能的

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

我使用来自material-ui doc

的withStyle装饰器来遵循样式方法

CSS in JS＆amp;在
  https://material-ui-next.com/customization/css-in-js/

重写
  https://material-ui-next.com/customization/overrides/

打字稿材料-UI指南
  https://material-ui-next.com/guides/typescript/

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

我已检查是否存在相同问题并在其他地方回答，甚至检查了材料-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

我想回答我的问题。感谢材料界的Tom Crockett。

由于material-ui组件的输入差异，使用Typescript 2.4.0将无法正常工作。但是，2.4.2补丁可以解决问题。

Answer 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);

打字稿材料UI属性＆＃39;类＆＃39; MUI组件的类型中缺少

2 个答案: