After implementing withStyles and makeStyles from material-UI, I encountered an issue where the CSS styling was not as expected, despite the correct class name being returned.
For example, consider the following 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);
(Observing in Chrome's inspector) The grid div has the class "App-letMeCheck-2" however, the corresponding style applied 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;
}