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