时间戳

首页 > 解决方案 > Material UI 自定义样式不适用于组件

reactjs - Material UI 自定义样式不适用于组件

问题描述

我刚刚开始在react js中学习Material UI。

在自定义样式方面，我遇到了一个问题，即一切似乎在逻辑上都是正确的，但样式不适用。

Create.js组件中有一个按钮，我试图在import { makeStyles } from "@material-ui/styles"

这些是package.json中安装的依赖项：

"dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@material-ui/styles": "^4.11.4",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.2",

这是Create.js组件：

import React from "react";
import Typography from "@mui/material/Typography";
import { Button, Container } from "@mui/material";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import { makeStyles } from "@material-ui/styles";

const useStyle = makeStyles({
  btn: {
    fontSize: 60,
    backgroundColor: "red",
  },
});

export default function Create() {
  const classes = useStyle();

  return (
    <Container>
      <Typography
        variant="h6"
        color="textSecondary"
        align="center"
        gutterBottom
      >
        Create a New Note
      </Typography>
      <Button
        className={classes.btn}
        onClick={() => console.log("you clicked me")}
        type="submit"
        color="secondary"
        variant="contained"
        endIcon={<KeyboardArrowRightIcon />}
      >
        Submit
      </Button>
    </Container>
  );
}

这是我在检查元素时看到的：

DevTools 一直忽略这种风格

标签： reactjsmaterial-ui

解决方案

代码到目前为止很好。我在文档和提供的代码中观察到的一个区别是makeStyles. 尝试makesStyles从@mui/styles. 请查看文档以供参考。

此外，MUI 现在与普通 css 兼容，可以进行像这样的细微调整。请参考这里

就浏览器忽略样式的问题而言，一种解决方法可以是important在自定义样式中使用关键字，但这不是推荐且效率低下的方法。

推荐阅读