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

Posted 2023-02-19

技术标签:

【中文标题】MUI createTheme 未正确将主题传递给 MUI 组件【英文标题】：MUI createTheme is not properly passing theme to MUI components 【发布时间】：2021-11-23 21:39:48 【问题描述】：

我使用 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;

谁能解释一下我错过了什么？

【问题讨论】：

@mui/styles 被视为旧版，自 MUI V5 起已弃用。 MUI 现在建议使用@mui/system，以避免在应用程序包中同时包含 JSS 和 Emotion。请参阅styles page 了解更多信息。 【参考方案1】：

改变这一行：

import  ThemeProvider  from "@mui/styles";

收件人：

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

原因：这里有2个ThemeProviders

The one from @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时访问主题（@ 987654339@道具/styled())。这里的问题是 Button 和 Menu 组件 uses styled() API 在底层，所以 ThemeProvider 需要从 @mui/material/styles 导入才能使其工作。

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

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

相关答案