Material-UI withStyles doesn't apply any kind of styles - reactjs

Question

I used the example in Material-UI for an AppBar and I simply changed it from a function to a class component, after that I looked at how to use withStyles and I did the exact same thing, but no matter what I do, and what kind of changes I make no style is applied.
"react": "^16.8.6",
"#material-ui/core": "^4.1.2",
"#material-ui/icons": "^4.2.1",
import React, {Component} from 'react';
import styleClasses from './SideDrawer.module.css';
import { withStyles } from '#material-ui/styles';
import PropTypes from 'prop-types';
// import UIManager from '../../UIManager/UIManager';
import Drawer from '#material-ui/core/Drawer';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import { fade, makeStyles } from '#material-ui/core/styles';
import IconButton from '#material-ui/core/IconButton';
import Typography from '#material-ui/core/Typography';
import InputBase from '#material-ui/core/InputBase';
import Badge from '#material-ui/core/Badge';
import MenuItem from '#material-ui/core/MenuItem';
import Menu from '#material-ui/core/Menu';
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import AccountCircle from '#material-ui/icons/AccountCircle';
import MailIcon from '#material-ui/icons/Mail';
import NotificationsIcon from '#material-ui/icons/Notifications';
import MoreIcon from '#material-ui/icons/MoreVert';
const useStyles = makeStyles(theme => ({
grow: {
flexGrow: 1,
zIndex: 1000,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block',
},
color: 'red'
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
width: 'auto',
},
},
searchIcon: {
width: theme.spacing(7),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
inputRoot: {
color: 'inherit',
},
inputInput: {
padding: theme.spacing(1, 1, 1, 7),
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: 200,
},
}
}));
class SideDrawer extends Component {
render () {
const { classes } = this.props;
console.log('classes', classes)
return (
<div className={styleClasses.grow}>
<AppBar className={'SideDrawer-inputInput-14'}>
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="Open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h6" noWrap>
Test
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="search..."
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'Search' }}
/>
</div>
<div className={classes.grow} />
</Toolbar>
</AppBar>
</div>
)
}
}
SideDrawer.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(useStyles)(SideDrawer);
The console.log('classes', classes) returns :
{grow: "SideDrawer-grow-8", menuButton: "SideDrawer-menuButton-9", title: "SideDrawer-title-10", search: "SideDrawer-search-11", searchIcon: "SideDrawer-searchIcon-12", …}
grow: "SideDrawer-grow-8"
inputInput: "SideDrawer-inputInput-14"
inputRoot: "SideDrawer-inputRoot-13"
menuButton: "SideDrawer-menuButton-9"
search: "SideDrawer-search-11"
searchIcon: "SideDrawer-searchIcon-12"
title: "SideDrawer-title-10"
But none of these styles is applied to the actual items or the AppBar. What am I doing wrong?

Answer 1

You should not be trying to use makeStyles along with withStyles. makeStyles returns a custom hook and passing this custom hook into withStyles will not work correctly.
Instead, you want the following:
const styles = theme => ({
grow: {
flexGrow: 1,
zIndex: 1000,
},
/* and all your other styles ... */
});
// other stuff (e.g. your SideDrawer component) ...
export default withStyles(styles)(SideDrawer);