Code sandbox and local react behave differently - css

Question

I am new to react and I am trying to change the color of the navbar. I modified the property backgroundColor and the color changes in code sandbox.
But when I run the same code on my local machine the color is not changed until I put !important.
Why does it behave differently for the same code ? And how to avoid such discrepencies ?
Code in local machine-
import * as React from "react";
import AppBar from "#mui/material/AppBar";
import Box from "#mui/material/Box";
import Toolbar from "#mui/material/Toolbar";
import Typography from "#mui/material/Typography";
import Button from "#mui/material/Button";
import IconButton from "#mui/material/IconButton";
import MenuIcon from "#mui/icons-material/Menu";
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles({
navbar: {
backgroundColor: "red"
}
});
export default function Navbar() {
const classes = useStyles();
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" elevation={0} className={classes.navbar}>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
);
}
Output in local machine-
Sandbox link- https://codesandbox.io/s/buttonappbar-material-demo-forked-8s64r?file=/demo.js:471-472