Material-UI withStyles 不向道具添加类

Question

我正在尝试使用 Material-UI 的withStyles方法实现一些样式，但是我无法将类作为道具。关于我缺少什么的任何建议？我在下面包含了相关代码，但请注意，<App>为简洁起见，我在此文件中省略了一个组件。

import React from 'react'
import ReactDOM from "react-dom";
import {Paper, Typography} from '@material-ui/core'
import {withStyles} from '@material-ui/core/styles'
import NavBar from "./navBar";

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

    componentDidMount() {
        console.log('Recipe Did Mount')
    }

    render() {
        const {recipeData, classes} = this.props;
        return (
            <Paper>
                <Typography className={classes.recipeName}>{recipeData.name}</Typography>
                <Typography className={classes.recipeIngredients}>{recipeData.ingredients}</Typography>
                <Typography className={classes.recipeInstructions}>{recipeData.instructions}</Typography>
            </Paper>
        )
    }
}

const styles = {
    root: {
        fontSize: "1.0rem",
        margin: "0px"
    },
    recipeName: {
        fontSize: "1.0rem",
        margin: "0px"
    },
    recipeIngredients: {
        fontSize: "1.0rem",
        margin: "0px"    },
    recipeInstructions: {
        fontSize: "1.0rem",
        margin: "0px"    }
};

withStyles(styles)(Recipe);

document.addEventListener('DOMContentLoaded', () => {
    ReactDOM.render(
        <App/>,
        document.body.appendChild(document.createElement('div')),
    )
});

Answer 1

由于您没有设置withStyles(styles)(Recipe);变量，我怀疑您必须Recipe直接在App.

withStyles不会改变Recipe。withStyles创建一个新组件来包装Recipe并传递classesprop 给它。为了查看classes道具，您需要使用新创建的组件，如下所示：

const StyledRecipe = withStyles(styles)(Recipe);
const App = ()=> {
   return <StyledRecipe/>;
}