gpt4 book ai didi

javascript - MUI createTheme 未正确将主题传递给 MUI 组件

转载 作者:行者123 更新时间:2023-12-04 14:43:35 26 4
gpt4 key购买 nike

我使用 MUI 在我的 React.JS 元素的索引中创建了一个主题。当我尝试将我的风格应用到我的 Appbar主题没有正确修改菜单按钮或菜单本身。按钮看起来是通用的默认值,当它应该与 Appbar 的颜色匹配时,菜单保持白色。本身。
我的 index.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在这里
  • The one from @mui/styles : 这个ThemeProvider确实发送Theme通过上下文关闭对象,它工作正常,您仍然可以使用 useTheme 访问它钩子(Hook):
  • const theme = useTheme();

    return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />
  • 来自 @mui/material/styles 的那个 : 这个ThemeProvider是上述内容的包装,但它也将主题注入(inject)到 StyledEngineThemeContext.Provider ,它允许您在使用 MUI API ( sx prop/styled() ) 时访问主题。这里的问题是 ButtonMenu组件 uses styled() API 引擎盖下,所以 ThemeProvider需要从 @mui/material/styles 导入让它工作。
  • return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />
    相关答案
  • Difference between @mui/material/styles and @mui/styles?
  • Cannot use palette colors from MUI theme
  • MUI - makeStyles - Cannot read properties of undefined
  • Material UI Dark Mode
  • 关于javascript - MUI createTheme 未正确将主题传递给 MUI 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69419447/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com