Material-ui 中的 makeStyles 需要使用这么多（！important <= css 代码）来设置 mui 组件的样式

Question

我现在正在尝试使用 material-ui 和 react 创建一个网站。我需要将自己的样式添加到 mui 组件。为此，我使用了“@mui”中的 makeStyle，但问题是，如果我想更改 material 组件，我必须在每个阶段使用 ( !important )。

所以这是一个简单的例子：

App.js

import { makeStyles } from "@mui/styles";
import { Button } from "@mui/material";

const useStyles = makeStyles({
  btn: {
    backgroundColor: "red !important",
  },
});

function App() {
  const classes = useStyles();

  return (
    <>
      <Button variant="contained" className={classes.btn}>
        Click me
      </Button>
    </>
  );
}

export default App;

如果我想更改

Answer 1

如果您是开始新的应用，新的MaterialUI版本建议不要使用useStyles，而是使用styled-components或EmotionJS。无论如何，如果您想使用 useStyles，请尝试将您的应用程序包装在来自 mui 的 <StylesProvider injectFirst></StylesProvider> 中。它应该首先注入您的样式，并且不需要 !important。

Material-ui 中的 makeStyles 需要使用这么多（！important <= css 代码）来设置 mui 组件的样式

makeStyles in Material-ui need to use so many ( !important <= css code ) to style mui components

reactjs

material-ui