Reactjs 未定义this.props.classes中带有样式道具的材质UI

我在createreact应用程序中有两个React组件，一个是父组件（App.js），一个是子组件（QuoteMachine.js）。 我在App.js中成功地应用了

with styles

HOC API，但当我在QuoteMachine.js中使用相同的格式添加一个API时，将

this.props.classes.card

作为属性传递给Material UI卡组件实例，导致类型错误无法读取未定义的属性“props”。 在多个组件中使用

with style

HOC是否有问题？我是否应该改用

ThemeProvider

QuoteMachine.js：

import React from 'react';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import './QuoteMachine.css';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  card: {
    padding: '30px'
  }
};

// Parentheses around function body is implicit return
const QuoteMachine = (props) => (
  <Card className={this.props.classes.card}>
    <CardContent>
      {props.isDoneFetching ?
        (
          <Typography>
            <p className="quote">{props.randomQuote().quote}</p>
            <p className="author">–{props.randomQuote().author}</p>
          </Typography>
        ) : 'Loading...'}
    </CardContent>

    <CardActions>
      <Button
        size="large"
        onClick={props.nextRandomQuote}
      >
        Next
      </Button>
    </CardActions>
  </Card>
)

export default withStyles(styles)(QuoteMachine);

从“React”导入React；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Card”导入卡片；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/CardContent”导入CardContent；
导入“/QuoteMachine.css”；
从“@material ui/core/styles”导入{withStyles}”；
常量样式={
卡片：{
填充：“30px”
}
};
//函数体周围的括号是隐式返回
const QuoteMachine=（道具）=>(
{props.isDoneFetching？
(
{props.randomQuote（）.quote}
–{props.randomQuote（）.author}
)：“正在加载…”
下一个
)
导出默认样式（样式）（QuoteMachine）；

App.js：

import React, { Component } from 'react';
import QuoteMachine from './QuoteMachine';
import 'typeface-roboto'; // From Material-UI
import { Grid } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import backgroundImage from './dawn.jpg';

const styles = {
  // container is root component (set in Grid component instance)
  container: {
    display: 'flex',
    alignItems: 'center',
    height: '100vh',
    background: `url(${backgroundImage}) center`,
    backgroundSize: 'cover', // Using this in background causes issues
  }
};

class App extends Component {
  constructor(props) {
    super(props);
    ...
  }

  ....

  render() {
    return (
      <Grid
        id="quote-box"
        className={this.props.classes.container}
        justify="center"
        container
      >
        <Grid xs={11} lg={8} item>
          <QuoteMachine
            isDoneFetching={this.state.isDoneFetching}
            randomQuote={this.randomQuote}
            nextRandomQuote={this.nextRandomQuote}
          />
        </Grid>
      </Grid>
    );
  }
}

export default withStyles(styles)(App);

import React，{Component}来自'React'；
从“./QuoteMachine”导入QuoteMachine；
导入“字体roboto”；//从物料界面
从'@material ui/core'导入{Grid}；
从“@material ui/core/styles”导入{withStyles}”；
从“/dawn.jpg”导入背景图像；
常量样式={
//容器是根组件（在网格组件实例中设置）
容器：{
显示：“flex”，
对齐项目：“居中”，
高度：“100vh”，
背景：`url（${backgroundImage}）中心`，
backgroundSize:'cover'，//在后台使用此选项会导致问题
}
};
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
...
}
....
render（）{
返回(
);
}
}
导出默认样式（样式）（应用程序）；

由于

QuoteMachine

是一个功能组件，因此它没有

此

实例，并且可以从参数到功能组件使用道具。您可以访问以下类

<Card className={props.classes.card}>