MUI createTheme没有正确传递主题到MUI组件

我使用MUI在我的React.JS项目的索引中创建了一个主题。当我尝试将我的样式应用到我的Appbar时，主题不能正确修改菜单按钮也不能修改菜单本身。按钮看起来一般默认，菜单保持白色，当它应该匹配Appbar本身的颜色。

我的指数。TSX看起来是这样的:

import React from "react";
import ReactDOM from "react-dom";
import AppbarTop from "./AppbarTop";
import { Router } from "react-router";
import { createBrowserHistory } from "history";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import { LocalizationProvider } from "@mui/lab";
import { createTheme } from "@mui/material";
import { ThemeProvider } from "@mui/styles";
import { StyledEngineProvider } from "@mui/material/styles";
const customHistory = createBrowserHistory();
const theme = createTheme({
palette: {
primary: {
main: "#242526"
},
secondary: {
main: "#d975d0"
},
text: {
primary: "#E4E6EB",
secondary: "#B0B3B8"
},
background: {
default: "#242526",
paper: "#242526"
}
}
});
ReactDOM.render(
<React.StrictMode>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Router history={customHistory}>
<ThemeProvider theme={theme}>
<StyledEngineProvider injectFirst>
<AppbarTop />
</StyledEngineProvider>
</ThemeProvider>
</Router>
</LocalizationProvider>
</React.StrictMode>,
document.getElementById("root")
);

我appbar。TSX是这样的:

import React from "react";
import {
AppBar,
Box,
Button,
Container,
Menu,
MenuItem,
Toolbar
} from "@mui/material";
import HomeIcon from "@mui/icons-material/Home";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles((theme?: any) => ({
appBar: {
background: theme.palette.primary.main,
height: "60px",
position: "relative"
}
}));
const AppbarTop: React.FC<{ [key: string]: any }> = () => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<any>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
<AppBar position="static" className={classes.appBar}>
<Toolbar>
<Button
id="basic-button"
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
Dashboard
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "basic-button"
}}
>
<MenuItem onClick={handleClose}>
<HomeIcon />{" "}
</MenuItem>
</Menu>
{/*test speed dial*/}
<Container maxWidth="sm"></Container>
<Box></Box>
</Toolbar>
</AppBar>
</>
);
};
export default AppbarTop;

有人能解释一下我错过了什么吗?

改变这一行:

import { ThemeProvider } from "@mui/styles";

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

原因:这里有2个ThemeProvider

@mui/styles:这个ThemeProvider确实通过上下文发送Theme对象，它工作得很好，你仍然可以使用useTheme钩子访问它:

const theme = useTheme();
return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />

@mui/material/styles:这个ThemeProvider是上面的包装器，但它也将主题注入到StyledEngineThemeContext.Provider，这允许您在使用MUI API (sxprop/styled())时访问主题。这里的问题是Button和Menu组件在底层使用styled()API，因此ThemeProvider需要从@mui/material/styles导入才能使其工作。

return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />

相关内容

最新更新

热门标签：