ReactJS Material UI Typescript - withStyles 警告

Question

我不断收到此警告，尽管我的样式已按我的意愿应用：

道具类型失败：提供了 function 类型的无效道具 function
到WithStyles(App)，预计object。
在 WithStyles(App) 中

import React from "react";
import {
  CssBaseline,
  Theme,
  createStyles,
  Paper,
  Typography,
  withStyles,
  WithStyles,
  withTheme
} from "@material-ui/core";

const styles = (theme: Theme) =>
  createStyles({
    layout: {
      width: "800",
      marginLeft: theme.spacing(2),
      marginRight: theme.spacing(2),
      [theme.breakpoints.up(800 + theme.spacing(2) * 2)]: {
        width: 800,
        marginLeft: "auto",
        marginRight: "auto"
      }
    },
    paper: {
      marginTop: theme.spacing(3),
      marginBottom: theme.spacing(3),
      padding: theme.spacing(2),
      [theme.breakpoints.up(800 + theme.spacing(3) * 2)]: {
        marginTop: theme.spacing(6),
        marginBottom: theme.spacing(6),
        padding: theme.spacing(3)
      }
    }
  });

interface AppProps extends WithStyles<typeof styles> {
  classes: any;
}

class App extends React.Component<AppProps> {
  constructor(props: AppProps) {
    super(props);
  }

  static defaultProps = {
    classes: styles
  };

  render() {
    return (
      <React.Fragment>
        <CssBaseline />

        <main className={this.props.classes.layout}>
          <Paper className={this.props.classes.paper}>
            <Typography component="h1" variant="h4" align="center">
              Sub Head
            </Typography>
            Hello World
          </Paper>
        </main>
      </React.Fragment>
    );
  }
}

export default withTheme(withStyles(styles)(App));

Answer 1

props接口扩展参考官方document

import {
  WithStyles,
  withStyles,
  withTheme
} from '@material-ui/core';

interface Props extends WithStyles<typeof styles> {
  classes: any,
  ...
}

class YourComponent extends React.Component<Props, State>{
  ...
}

export default withTheme(withStyles(styles)(YourComponent));

更新

你不需要从样式中设置默认道具

  static defaultProps = {
    classes: {},
  }

会好的。猜测错误来自这里