為什么我無法使用 makeStyle 覆蓋 Material UI styles

Question

我無法覆蓋材質 UI Appbar styles 除非我在組件內使用 sx 來設置樣式或在 makeStyle 類中使用 use.important。 我不想使用 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 styles 的最佳方法，那將是驚人的

Answer 1

一切都是對的。 只需使用 class 而不是材質 UI 的 className 即可接受 styles。

<AppBar position="fixed" open={open} class={classes.navbar}>

Answer 2

解決方案1：上面回答

一切都是對的。 只需使用 class 而不是材質 UI 的 className 即可接受 styles。 此解決方案也可以使用，但會從使用 className 而不是 class 的反應中收到警告。

解決方案 2：使用 StyledEngineProvider 並將所有組件包裝在其中。

import Header from "./components/header";
import TopSection from "views/top-section";

import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
import theme from "utils/theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <StyledEngineProvider injectFirst>
        <Header />
        <TopSection />
      </StyledEngineProvider>
    </ThemeProvider>
  );
}

export default App;

如果您還沒有創建主題文件，您可以根據需要創建和使用內容。

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    allVariants: {
      fontFamily: "RobotoMedium",
      textTransform: "none",
    },
  },
  palette: {
    primary: {
      main: "#58F2F0",
    },
    secondary: {
      main: "#58F2F0",
    },
  },
});

export default theme;