MUI createTheme 没有正确地将主题传递给 MUI 组件

Question

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

有人可以解释一下我缺少什么吗？

Answer 1

改变这一行：

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 时访问主题（ sx prop/ styled() ） . 这里的问题是Button和Menu组件在ThemeProvider 使用style() API，因此需要从@mui/material/styles导入ThemeProvider以使其工作。

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

相关回答

• @mui/material/styles 和@mui/styles 的区别？
• 不能使用 MUI 主题的调色板颜色
• MUI - makeStyles - 无法读取未定义的属性
• 材质 UI 暗模式