0

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,

enter image description here

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

enter image description here

Can somebody tell me what am I missing here?

Thanks in advance

Rafael

Rafael
  • 2,413
  • 4
  • 32
  • 54

1 Answers1

0

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

Sarang Sami
  • 632
  • 1
  • 6
  • 13
  • Yeah Sarang, I decided to use objects with the sx property in this module, which is kind of like a wrapper for all other components. But in all other components I'm using makeStyles, since I'll make the whole site responsive, and makeStyles make it easier – Rafael Feb 07 '22 at 12:14