'makeStyles function is not working in Material UI

Not sure whats going on with the button , whn i apply a class frim makeStyle function it does not apply , but when i apply it diesrly to the button with the styles props it works perfectly , am i doing anything wrong? , note: below is all the dependencies installed for this project.

import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
  aboutBox: {
    width: "30rem",
    height: "21.9rem",
    padding: "0.5rem",
    marginTop: "0.1rem",
    marginLeft: "24rem",
  },
  startBt: {
    marginLeft: "11rem",
    border: "2px solid #555",
  },
});

const About = () => {
  const classes = useStyles();
  const navigate = useNavigate();

  return (
    <Card
      component={motion.div}
      className={classes.aboutBox}
      variants={transitionVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
    >
      <CardContent>
        <Typography variant="h4" align="center" gutterBottom>
          World Flag Quiz Test
        </Typography>
        <Typography variant="h5" align="center" gutterBottom>
          Please Read Below Instructions
        </Typography>
      </CardContent>
      <CardActions>
        <Button
          size="large"
          variant="contained"
          style={{ marginLeft: "11rem", border: "2px solid #555" }}
          onClick={() => navigate("/quiz")}
        >
          Start
        </Button>
      </CardActions>
    </Card>
  );



"dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.5.0",
    "@mui/material": "^5.5.0",
    "@mui/styles": "^5.5.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "fireworks": "^2.2.7",
    "framer-motion": "^4.1.17",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
reactjsbuttonmaterial-uimakestyles


Solution 1:[1]

Just check with the imports like are you using MUI Button or from any other library. I just tried the same on sandbox and can see all the styles that you used. Check the below sandbox.

Working code

Based on the MUI Documentation:

?? @mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

Instead of that, you can use the styled components or the sx prop

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions