MUI V5 - MakeStyles style gets overwritten

user_9089439 0
Viewed 612

I just updated to 5.0.0-alpha.25 (coming from 5.0.0-alpha.10) and now makeStyles is not working. I could not find anything in the breaking changes related to it so I wonder if it is a bug. When inspecting an element the makeStyles css rule is overwritten by a strange called css rule which seems to be the default values.

Here is an image which shows the rules in the inspector

Inspector

Did anyone face the same issue or am I overseeing a change in the makeStyles usage.

const useStyles = makeStyles((theme) => ({
    root: {
        position: "absolute",
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        paddingLeft: theme.spacing(2),
        paddingRight: theme.spacing(2),
        display: 'contents'
    },
    row: {
        backgroundColor: "red"
    }
}));

/* ... */

const classes = useStyles()

/* ... */

<Grid container spacing={1} className={classes.root} alignItems="flex-start" justifyContent="center">
material-ui
1 Answers

I had the same problem. You need to wrap your entire application in StyledEngineProvider component. I've done this in index.js file. Restart you local server by npm start nad works perfectly

Here's example

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import StyledEngineProvider from '@mui/material/StyledEngineProvider'

ReactDOM.render( <StyledEngineProvider injectFirst> <App /> </StyledEngineProvider>,
    document.getElementById('root')
);
user_125815920
Related