0

除非我在组件内使用 sx 来设置样式或在 makeStyle 类中使用 !important ，否则我无法覆盖材质 UI Appbar 样式。我不想使用 sx，因为我希望组件看起来整洁。我的代码看起来像：

const useStyles = makeStyles({
    navbar: {
        backgroundColor: "#fff ",
        boxShadow: "none"

    }
}) 
export default function Navbar(props) {
    const theme = useTheme();
    const [open, setOpen] = React.useState(false);
    const classes = useStyles(props);
    const handleDrawerOpen = () => {
        setOpen(true);
    };

    const handleDrawerClose = () => {
        setOpen(false);
    }

    return (
        <Box className='section__navbar'>
            <CssBaseline />
            <AppBar position="fixed" open={open} className={classes.navbar}>

                <Typography sx={{ display: "block", width: "100%" }} variant="h6" noWrap component="div">
                    <img className='xerago__logo' src={logo} alt="Xerago Logo" />
                </Typography>
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        onClick={handleDrawerOpen}
                        edge="start"
                        sx={{ display: { md: "none" }, mr: 2, ...(open && { display: 'none' }) }}
                    >
                        <MenuIcon sx={{ backgroundColor: "#5578eb" }} />
                    </IconButton>
                    <Typography sx={{ width: "100%", display: { xs: "none", md: "inline-block" } }} component="div">
                        <ul className='nav__items'>
                            {pages.map((page, i) => (
                                <li key={i} className="link" >
                                    <Link className="single__item" to="/groups">{page}</Link>
                                </li>
                            ))}
                        </ul>
                    </Typography>
                </Toolbar>
            </AppBar>

        </Box >
    );
}

如果有人可以向我解释覆盖 Material UI 样式的最佳方法，那就太棒了

4

1 回答 1

0

一切都是对的。只需要使用 class 而不是 className 来让 Material UI 接受样式。

<AppBar position="fixed" open={open} class={classes.navbar}>
于 2022-01-24T03:37:41.227 回答