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

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

1 голос
/ 05 апреля 2019

Я пытаюсь реализовать некоторые стили, используя метод 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')),
    )
});

Ответы [ 2 ]

3 голосов
/ 05 апреля 2019

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

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

const StyledRecipe = withStyles(styles)(Recipe);
const App = ()=> {
   return <StyledRecipe/>;
}
0 голосов
/ 05 апреля 2019

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

`withStyles(styles)(Recipe);`

на 

export default withStyles(styles)(Recipe);

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

...