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

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