When creating classes using makeStyles and useClasses, I've noticed that MUI CSS tends to take precedence over my custom styles unless I use the '!important' rule. Is there a way to override MUI styles without having to rely on '!important'? It seems inconsistent as some default MUI CSS fails when necessary. Interestingly, the logo in the same code functions properly even without using '!important'. Here is an example of MUI CSS overriding makeStyles CSS.
import React, { useState, useEffect } from "react";
import AppBar from "@mui/material/AppBar";
import { makeStyles, createStyles } from "@mui/styles";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Toolbar from "@mui/material/Toolbar";
import logo from "../../assets/logo.svg";
import Button from "@mui/material/Button";
import { Link } from "react-router-dom";
const useStyles = makeStyles((theme) => ({
toolbarMargin: {
...theme.mixins.toolbar,
marginBottom: "3em",
},
logo: {
height: "8em",
},
tabContainer: {
marginLeft: "auto",
},
tab: {
...theme.typography.tab,
minWidth: 10,
marginLeft: "25px !important",
},
button: {
...theme.typography.estimate,
borderRadius: "50px !important",
marginLeft: "50px !important",
marginRight: "25px !important",
height: "45px !important",
},
logoContainer: {
padding: "0px !important",
"&:hover": {
backgroundColor: "transparent",
},
},
}));
export default function Header(props) {
const classes = useStyles();
return (
<React.Fragment>
<ElevationScroll>
<AppBar position='fixed'>
<Toolbar disableGutters>
<Button
disableRipple
className={classes.logoContainer}
component={Link}
to='/'
>
<img src={logo} alt='company Logo' className={classes.logo}></img>
</Button>
<Tabs
className={classes.tabContainer}
value={0}
textColor='#fff'
onChange={handleChnage}
indicatorColor='primary'
>
<Tab
className={classes.tab}
component={Link}
to='/'
label='Home'
/>
<Tab
className={classes.tab}
component={Link}
to='/services'
label='Services'
/>
</Tabs>
<Button
variant='contained'
className={classes.button}
color='secondary'
>
Free Estimate
</Button>
</Toolbar>
</AppBar>
</ElevationScroll>
</React.Fragment>
);
}