Material-UI withStyles не добавляет классы к реквизиту

Я пытаюсь реализовать некоторые стили, используя метод withStyles Material-UI, однако я не могу получить классы в качестве опоры. Любые предложения относительно того, что мне не хватает? Я включил соответствующий код ниже, но обратите внимание, что в этом файле есть компонент <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')),
    )
});

reactjs material-ui
person Jonny B    schedule 04.04.2019    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Поскольку вы не устанавливаете withStyles(styles)(Recipe); в переменную, я подозреваю, что вы должны использовать Recipe непосредственно внутри App.

withStyles не меняется Recipe. withStyles создает новый компонент, который обертывает Recipe и передает ему свойство classes. Чтобы увидеть реквизит classes, вам нужно использовать только что созданный компонент с чем-то вроде следующего:

const StyledRecipe = withStyles(styles)(Recipe);
const App = ()=> {
   return <StyledRecipe/>;
}
person Ryan Cogswell    schedule 05.04.2019
comment
Я считаю, что проблема в этом. Я реализую это решение и отмечу его как решение, если оно сработает. - person Jonny B; 05.04.2019

arrow_upward
0
arrow_downward

Предполагая, что приложение определено в отдельном файле (для тех, кто может искать этот вопрос), измените

`withStyles(styles)(Recipe);`

To

export default withStyles(styles)(Recipe);

Как уже объяснил Райан, «withStyles — это компонент более высокого порядка, который создает и возвращает новый компонент».

person Kumar Nitesh    schedule 05.04.2019