material ui - makeStyles doesn't create style properly

Question

When I use withStyles + makeStyles of material-UI, it doesn't create the right css, but does return the properly name of class.

for example, for that component:

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

(I'm using chrome's inspector) the div of grid does have the class "App-letMeCheck-2" but the style of class is:

.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 returns a hook (by convention named useStyles). withStyles is an HOC, they aren't interoperable. Just two different approaches to achieve the same result.

const useStyles = makeStyles(styles)

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


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

})