Question

当我使用material-UI的withStyles + makeStyles时，它不会创建正确的CSS，但是会返回正确的类名。

例如，对于该组件：

import React, { Component } from 'react'
import { Container, CssBaseline, Grid } from '@material-ui/core';
import { makeStyles, withStyles } from '@material-ui/styles';

const styles = makeStyles(theme => ({
    letMeCheck: {
        backgroundColor: 'red'
    }
}));

class App extends Component {
    render() {
        const { classes } = this.props;

        return (
            <Container maxWidth="lg">
                <CssBaseline />
                <Grid container>
                    <Grid className={classes.letMeCheck} item xs={12} sm={6}>
                        A
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        B
                    </Grid>
                </Grid>
            </Container>
        );
    }
}

export default withStyles(styles)(App);

（我正在使用Chrome的检查器）网格的div确实具有“ App-letMeCheck-2”类但是班级风格是：

.App-letMeCheck-2 {
    0: m;
    1: a;
    2: k;
    3: e;
    4: S;
    5: t;
    6: y;
    7: l;
    8: e;
    9: s;
    10: -;
    11: l;
    12: e;
    13: t;
    14: M;
    15: e;
    16: C;
    17: h;
    18: e;
    19: c;
    20: k;
    21: -;
    22: 1;
}

Answer 1

makeStyles返回hook（按照惯例，命名为useStyles）。 withStyles是HOC，它们不可互操作。只是两种不同的方法来获得相同的结果。

const useStyles = makeStyles(styles)

const Component = () =>{
    const classes = useStyles()
}


const Component = withStyles(styles)(({ classes }) =>{

})

材质ui-makeStyles无法正确创建样式

1 个答案: