this.props.classes 中的 Material-UI withStyles 道具未定义答案

【问题标题】：Material-UI withStyles props in this.props.classes is undefinedthis.props.classes 中的 Material-UI withStyles 道具未定义
【发布时间】：2019-07-11 05:27:50
【问题描述】：

我在 Create React App 应用程序中有两个 React 组件，一个父组件 (App.js) 和一个子组件 (QuoteMachine.js)。我在 App.js 中成功应用了withStyles HOC API，但是当我使用相同的格式在 QuoteMachine.js 中添加一个时，将this.props.classes.card 作为属性传递给 Material-UI Card 组件实例导致 TypeError 无法读取属性未定义的“道具”。在多个组件中使用 withStyles 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);

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

由于QuoteMachine 是一个函数组件，它没有this 实例，并且可以从函数组件的参数中获得道具。您将访问像

这样的类

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

【讨论】：