Material UI custom styles do not apply on the component - reactjs

Question

I have just started learning Material UI in react js.
When it comes to custom styling, I encounter an issue where everything seems to be logically correct but the styling doesn't apply.
There is a button in Create.js component which I'm trying to change its style with the help of import { makeStyles } from "#material-ui/styles"
These are the dependencies installed in 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",
Here is Create.js component:
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>
);
}
This is what I see when I inspect the element:
DevTools keeps ignoring this style

Answer 1

The code is so far good. One difference I observed in documentation and the provided code is the import of makeStyles. Try importing makesStyles from #mui/styles. For reference have a look at documentation.
Also MUI is now compatible with plain css for minor tweaks like these. Please refer here
As far as the issue of browser ignoring styles is concerned a workaround can be using important keyword in custom styles but that is not a recommended and inefficient way.