How to use MUI v5 makeStyles without ThemeProvider? - reactjs

Question

I have a styles.tsx file because I rather not put the styling in my components:
//styles.tsx
import {grey, purple} from '#mui/material/colors';
import {styled, Theme} from '#mui/material/styles';
import {createStyles, makeStyles} from '#mui/styles';
export const drawerStyles = makeStyles((theme: Theme) =>
createStyles({
logo: {
'fontSize': '2em',
'fontFamily': 'Oleo Script Swash Caps',
'background': 'transparent',
'border': 'none',
'marginLeft': theme.spacing(1),
'width': '41px',
'overflow': 'hidden',
'transition': 'all 0.1s ease-out',
'cursor': 'pointer',
'&:hover': {
color: purple[700],
},
},
slide: {
paddingLeft: '8px',
width: '100%',
},
}),
);
In another component I import the drawerStyles:
// drawerContainer.tsx
import {drawerStyles} from 'Src/styles';
export const DrawerContainer = () => {
const classes = drawerStyles();
return (
<Box className={`${classes.logo}>
<p>some text</p>
</Box>
)
The code compiles but the browser is returning an error:
MUI: The styles argument provided is invalid. You are providing a function without a theme in the context. One of the parent elements needs to use a ThemeProvider.
On my index.tsx I use ThemeProvider:
// index.tsx
import {ThemeProvider, StyledEngineProvider} from '#mui/material/styles';
import {theme} from 'Src/theme';
const Root = () => {
return (
<ApolloProvider client={client}>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline>
<App />
</CssBaseline>
</ThemeProvider>
</StyledEngineProvider>
</ApolloProvider>
);
};
render(<Root />, document.getElementById('root'));
I think the issue is because styles.tsx isn't inside the index.tsx scope. So it doesn't have the themeprovider context when the browser loads the file.
Should I just move all the styling in the component? Or is there another way?
// edit //
Created the styling with the styled api:
// styles.tsx
export const Logo = styled(Box)(({theme}) => ({
'fontSize': '2em',
'fontFamily': 'Oleo Script Swash Caps',
'background': 'transparent',
'border': 'none',
'marginLeft': theme.spacing(1),
'width': '41px',
'overflow': 'hidden',
'transition': 'all 0.1s ease-out',
'cursor': 'pointer',
'&:hover': {
color: purple[700],
},
}));
// DrawerContainer.tsx
<Link data-cy='btn_home' to='/'>
<Logo component='button'>Movieseat</Logo>
</Link>
I kind of dislike this syntax, it's not clear what type of object Logo is.

Answer 1

See this answer for more detail. In short, makesStyles/withStyles is not the first class APIs in MUI v5 anymore and is scheduled to be removed in v6. If you use the old API, you have to add a theme yourself.
In v4 you can import makeStyles from #material-ui/core/styles without having to supply a custom theme. You can do the same in v5 but only with the new styled API that is being used by all of the MUI components internally.