Material UI CSS overriding makeStyles CSS

Question

I am creating classes using makeStyles and useClasses. But in most of the cases, MUI CSS is getting applied and my classes are only getting applied by using '!important'. Is there a way to override MUI styles without '!important'. While using important, some by default MUI CSS is failing. Also from the same code logo is working properly without even using !important. This shows 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>
    );
}

Your problem is the selectors [specitivity](https://stackoverflow.com/questions/4072365/understanding-css-selector-priority-specificity). As both selectors are equally specific, the one that gets defined later on will overwrite the first one. By using `!important` youre breaking specitivity. I dont know `makeCss` well, but the solution would be increasing the specitivity of the selector created by `makeCss`. This will make it overwrite your MUI styles by specitivity and youll be able to drop all `!important`. — Fabian S., Nov 29 '21 at 07:13

davood Sandoghsaz · Answer 1 · 2021-11-29T07:29:05.807

You can put all these styles in a CSS file and import that file inside last of your html file.

Or you can use !important tag on every style that has been overridden:

const useStyles = makeStyles((theme) => ({
    toolbarMargin: {
        ...theme.mixins.toolbar,
        marginBottom: "3em" !important,
    },
    logo: {
        height: "8em" !important,
    },
    tabContainer: {
        marginLeft: "auto",
    },
    tab: {
        ...theme.typography.tab,
        minWidth: 10px !important,
        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",
        },
    },
}));

Question explicitly asks about not using `!important` - _"Is there a way to override MUI styles without '!important'"_ — Fabian S., Nov 29 '21 at 07:14

Material UI CSS overriding makeStyles CSS

1 Answers1