时间戳

首页 > 解决方案 > 材质 UI V5：makeStyles 在材质 ui V5 中不起作用

reactjs - 材质 UI V5：makeStyles 在材质 ui V5 中不起作用

问题描述

我试图升级材料 v5（从 v4）。根据文档，建议使用 Styled 或 sx API，但我想使用 v4 中的 makeStyles 方法。即使它在 v5 中已被弃用，但可以使用（根据文档）。但是我无法在 makeStyles 回调函数中获取主题变量，导致无法访问未定义的属性（例如，theme.breakpoints.between ...）

import makeStyles from '@mui/styles/makeStyles';
const useStyles = makeStyles((theme) => ({
   // here theme variable is undefined
  appBar: {
    backgroundColor: "white",
    height: "60px",
    padding: "0px 5em",
    [theme.breakpoints.between("xs", 'lg')]: {
      padding: "0px",
    },
  },
 .......

这是我的 index.js

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

ReactDOM.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <App />
      </ThemeProvider>
    </StyledEngineProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

主题.js

import { createTheme, responsiveFontSizes, adaptV4Theme } from "@mui/material/styles";
import baseTheme from "./baseTheme";

let theme = createTheme(adaptV4Theme(baseTheme));
theme = responsiveFontSizes(theme);

export default theme;

我还注意到，StyledEngineProvider 没有被导入属性（跟随这个）

在此处输入图像描述

包.json

    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.13",
    "@mui/icons-material": "^5.1.0",
    "@mui/lab": "^5.0.0-alpha.54",
    "@mui/material": "^5.1.0",
    "@mui/styles": "^5.1.0",

我是否必须安装其他软件包才能使其正常工作？

标签： reactjsmaterial-ui

解决方案

好的，刚遇到这个问题。makeStylesandstyled使用不同的上下文来获取主题。为了让您的 makeStyles 访问您需要的主题import { ThemeProvider } from '@mui/styles'。但要使用 styled()，您需要import { ThemeProvider } from '@mui/material'.

如果你同时使用 styled() 和 makeStyles 进行迁移，你需要同时拥有这两个主题提供者......

推荐阅读