makeStyles function is not working in Material UI

Question

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"
  },

mc-user · Answer 1 · 2022-03-14T12:28:02.320

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

edited Mar 14 '22 at 12:28

answered Mar 14 '22 at 10:24

mc-user

1,769
4
14
25

I checked with the imports seems fine , im not sure if i can post my imports here , would care look at my github respo ? – Mar 14 '22 at 10:50
Sure. You can share a sandbox link also. Will check and update you. – mc-user Mar 14 '22 at 12:17
actually i just solved the problem , i surrounded the button with a Box tag and i put all the styles in there , and it worked . – Mar 14 '22 at 12:36

makeStyles function is not working in Material UI

1 Answers1