使用makestyle时，梅5无法读取未定义的属性(读取“up”)

Question

我最近建立了一个反应应用程序与MUI-5，它的工作很好，但现在我面临一个奇怪的问题，我的应用程序不会启动，我看到了一堆梅错误。这些错误发生在我删除了yarn.lock文件并新添加了所有包之后。我试过每一种解决办法，但都行不通。

错误：

MUI:提供的styles参数无效。您正在提供一个在上下文中没有主题的函数。 未定义的TypeError:无法读取未定义的属性(读取“向上”)

package.json文件

    {
      "name": "doctor",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@date-io/date-fns": "^2.11.0",
        "@date-io/moment": "^2.11.0",
        "@emotion/react": "^11.7.1",
        "@emotion/styled": "^11.6.0",
        "@material-ui/core": "^4.12.4",
        "@mui/icons-material": "^5.2.5",
        "@mui/lab": "^5.0.0-alpha.62",
        "@mui/material": "^5.10.7",
        "@mui/styles": "^5.10.7",
        "@mui/system": "^5.10.6",
        "@reduxjs/toolkit": "^1.7.1",
        "@stripe/react-stripe-js": "^1.7.0",
        "@stripe/stripe-js": "^1.22.0",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^12.0.0",
        "@testing-library/user-event": "^13.2.1",
        "@types/react-qr-reader": "^2.1.4",
        "autoprefixer": "^10.4.0",
        "web-vitals": "^2.1.0",
        "yup": "^0.32.11"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {
        "@types/chart.js": "^2.9.35",
        "@types/file-saver": "^2.0.5",
        "@types/jest": "^27.0.1",
        "@types/node": "^16.7.13",
        "@types/react": "^17.0.20",
        "@types/react-dom": "^17.0.9",
        "@types/react-redux": "^7.1.21",
        "@types/react-router-dom": "^5.1.7",
        "@types/react-table": "^7.7.9",
        "@types/redux-logger": "^3.0.9",
        "chartjs-plugin-datalabels": "^2.0.0",
        "lodash": "^4.17.21"
      },
      "resolutions": {
        "@types/react": "17.0.2",
        "@types/react-dom": "17.0.2"
      }
  }

app.tsx文件；

import React from "react";
import { ThemeProvider } from "@material-ui/core/styles";
import "./App.css";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
// redux
import { Provider } from "react-redux";
import store, { persistor } from "./redux/store";
import { PersistGate } from "redux-persist/integration/react";

// Routes
import { ConnectedRouter } from "connected-react-router";
import history from "./redux/history";
import Router from "./Router";
// Theme
import { SnackbarProvider } from "notistack";
import CustomSnackbarProvider from "./providers/CustomSnackbarProvider";

import muiTheme from "./constants/theme";
import { makeStyles } from "@mui/styles";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
  BarElement,
} from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { useLocation } from "react-router-dom";
import AccessControlWrapper from "./components/AccessControlWrapper";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  BarElement,
  ChartDataLabels,
  Filler
);

declare var process: {
  env: {
    REACT_APP_STRIPE_PUBLISH_KEY: string;
    REACT_APP_STRIPE_CLIENT_SECRET: string;
  };
};

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISH_KEY);

function App() {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor} loading={null}>
        <Elements stripe={stripePromise}>
          <ConnectedRouter history={history}>
            <ThemeProvider theme={muiTheme}>
              <SnackbarProvider
                maxSnack={3}
                anchorOrigin={{
                  vertical: "top",
                  horizontal: "center",
                }}
              >
                <CustomSnackbarProvider>
                  <AccessControlWrapper>
                    <Router />
                  </AccessControlWrapper>
                </CustomSnackbarProvider>
              </SnackbarProvider>
            </ThemeProvider>
          </ConnectedRouter>
        </Elements>
      </PersistGate>
    </Provider>
  );
}

export default App;

主题配置文件：

import { createTheme } from "@material-ui/core/styles";

declare module "@mui/material/styles" {
  interface BreakpointOverrides {
    xs: true; // removes the `xs` breakpoint
    sm: true;
    md: true;
    lg: true;
    xl: true;
    xxl: true;
  }
}

const theme = {
  palette: {
    background: {
      default: "#FBFBFB",
    },
    primary: {
      light: "#9D9DA5",
      main: "#2EC2A5",
      contrastText: "#fff",
    },
    secondary: {
      light: "#ff7961",
      main: "#24344B",
      dark: "#ba000d",
      contrastText: "#000",
    },
  },
};

const BREAKPOINTS = {
  xs: 0,
  sm: 600,
  md: 900,
  lg: 1200,
  xl: 1536,
  xxl: 1800,
};

let muiTheme = createTheme({
  breakpoints: {
    values: BREAKPOINTS,
  },
  ...theme,
});
export default muiTheme;

Styles.tsx

import { Theme } from "@mui/system";
import { makeStyles } from "@mui/styles";


export const useStyles = makeStyles((theme: Theme) => ({
  intro: {
    padding: "0 2rem",
    [theme.breakpoints.up("lg")]: {
      padding: "0 4rem !important",
    },
  },
}));

我被这个问题困扰了几天了。我不知道我做错了什么。我已经用ThemeProvider完成了我的路线，但是仍然会抛出这些错误。

Answer 1

根据文档

使用主题上下文 从v5开始，MUI不再使用JSS作为它的默认样式解决方案。如果仍然希望使用@mui/styles导出的实用程序，并且它们依赖于theme，则需要将theme作为上下文的一部分提供。为此，您可以使用在ThemeProvider中可用的@mui/styles组件，或者，如果您已经在使用@mui/material，则应该使用从@mui/material/styles导出的组件，以便“@mui/material”中的组件可以使用相同的theme。

所以你的Styles.tsx应该是：

import { Theme } from "@mui/system";
import { makeStyles } from "@mui/styles";
import { createTheme } from '@mui/material/styles';
//import muiTheme from "./constants/...";

export const useStyles = makeStyles((muiTheme) => ({
  intro: {
    padding: "0 2rem",
    [theme.breakpoints.up("lg")]: {
      padding: "0 4rem !important",
    },
  },
}));

并且要注意：

MUI的@mui/styles是遗留的样式解决方案。它依赖于JSS作为样式解决方案，不再在@mui/material中使用，在v5中不推荐使用。

和

React.StrictMode @mui/styles不兼容⚠️或React 18。

因此，我建议使用更好的解决方案，如styled或sx支柱。