material-ui - MUI V5 - MakeStyles 样式被覆盖

Question

我刚刚更新到 5.0.0-alpha.25(来自 5.0.0-alpha.10)，现在 makeStyles 无法正常工作。我在与它相关的重大更改中找不到任何内容，所以我想知道它是否是一个错误。检查元素时，makeStyles css 规则被一个奇怪的 css 规则覆盖，该规则似乎是默认值。

这是在检查器中显示规则的图像

有没有人遇到同样的问题，或者我是否在监督 makeStyles 用法的变化。

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">

Answer 1

我遇到了同样的问题。您需要将整个应用程序包装在 StyledEngineProvider 组件中。我在 index.js 文件中完成了这个。通过 npm start 重新启动本地服务器 nad 完美运行

举个例子

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