Блог

Я только что начал изучать пользовательский интерфейс материалов в react js.

Когда дело доходит до пользовательского стиля, я сталкиваюсь с проблемой, когда все кажется логически правильным, но стиль не применяется.

Есть кнопка в 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 продолжает игнорировать этот стиль

Код до сих пор хорош. Одно различие, которое я заметил в документации и предоставленном коде, заключается в импорте makeStyles . Попробуйте импортировать makesStyles из @mui/styles . Для справки ознакомьтесь с документацией.

Кроме того, MUI теперь совместим с обычным css для небольших настроек, подобных этим. Пожалуйста, обратитесь сюда

Что касается проблемы игнорирования браузером стилей, то обходным путем может быть использование important ключевого слова в пользовательских стилях, но это не рекомендуемый и неэффективный способ.