时间戳

首页 > 解决方案 > MUI V5 - MakeStyles 样式被覆盖

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

问题描述

我刚刚更新到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">

标签： material-ui

解决方案

我有同样的问题。您需要将整个应用程序包装在 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')
);

推荐阅读