ReactJS Типизированный пользовательский интерфейс материалов - предупреждение withStyles - PullRequest
Новая
       7

ReactJS Типизированный пользовательский интерфейс материалов - предупреждение withStyles

0 голосов
/ 09 марта 2020

Я продолжаю получать это предупреждение, хотя мой стиль применяется так, как я хочу:

Неудачный тип пропелла: недопустимая опора classes типа function предоставляется
до WithStyles(App), ожидается object.
в WithStyles (приложение) 

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

1 Ответ

1 голос
/ 09 марта 2020

Интерфейс реквизита должен быть расширен. См. Официальный документ 

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: {},
  }

было бы хорошо. Догадываясь, ошибка пришла отсюда

...