Material UI CSS 覆盖 makeStyles CSS

Question

我正在使用 makeStyles 和 useClasses 创建类。但在大多数情况下，MUI CSS 正在被应用，而我的类只能通过使用“！important”来应用。有没有办法在没有“！important”的情况下覆盖 MUI 样式。在使用重要时，默认情况下有一些 MUI CSS 失败。同样来自相同代码的徽标甚至可以在不使用 !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>
    );
}

Answer 1

您可以将所有这些样式放在一个 CSS 文件中，然后将该文件导入到您的 html 文件的最后。

或者你可以在每个被覆盖的样式上使用 !important 标签：

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