just declaring useStyles in a Mui-React wrapper component, produces strange behaviors

Question

I'm using mui makeStyles in all my components.

But when I try to use it in a wrapper component, I get undesired behavior

The code that I'm using is this:

import Box from '@mui/material/Box';
import React from 'react';
import NavBar from './NavBar';
import SwipeableLeftDrawer from './SwipeableLeftDrawer';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
    text: {
        marginTop: 0
    }
}));

const WrapperComponent = ({ render }) => {
    // const classes = useStyles(); // If I uncomment this line, I start to have problems
    const [ drawerOpen, setDrawerOpen ] = React.useState(false);

    return (
        <Box>
            <SwipeableLeftDrawer
                open={drawerOpen}
                setDrawerOpen={setDrawerOpen}
                drawerWith={'10em'}
                //
            />
            <Box
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    width: '100vw',
                    height: '100vh'
                }}
            >
                <NavBar setOpenDrawer={setDrawerOpen} /> // <=== HERE, SOME STYLINGS CEASE TO WORK
                <Box>{render()}</Box> // here, I render the wrapped component
                ...
                ... 

This is what I have now,

If I just declare the constant classes = useStyles, even without using it, I get this:

Can somebody tell me what am I missing here?

Thanks in advance

Rafael

Answer 1

don't use makeStyle in mui v5 style by using sx props