材质 UI 无法与 Next.js 一起正常工作答案

【问题标题】：Material UI is not working properly with Next.js材质 UI 无法与 Next.js 一起正常工作
【发布时间】：2021-09-30 19:48:45
【问题描述】：

这些是我在使用 Next.js 和 Material UI 时遇到的问题，即使我遵循 Material UI 文档中提到的方法。

如果我使用带有makeStyles 的道具，我会收到此错误：

如果我将状态作为道具传递，我会得到

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    background: "#EFEFEF",
    minHeight: (props: any) => (props.open ? "150vh" : "100vh"),
  },
   
  },
}));

const Profile = () => {
  const [open, setOpen] = useState(false);
  const classes = useStyles({ open });

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };


  return (
    <div className={classes.root}>
      <Layout authRoute={false} showNavbar={false}>
        <Container maxWidth="lg">
          <Header method={method} />

          <div className={classes.btnContainer}>
            <Button
              variant="contained"
              color="secondary"
              className="yesBtn"
              onClick={handleOpen}>
              <IoMdCheckmark />
              Yes
            </Button>
            <Button
              variant="contained"
              color="default"
              className="noBtn"
              onClick={() => router.push("/")}>
              <TiDeleteOutline />
              No
            </Button>
          </div>

          <ProfileModal handleClose={handleClose} open={open} />
        </Container>
      </Layout>
    </div>
  );
};

export default Profile;

媒体查询在生产中不起作用 (theme.breakpoints.down("sm"))。

export const useButtonStyle = makeStyles(theme => ({
    submitBtn: {
        padding: "12px 16px",
        borderRadius: theme.shape.borderRadius,
        position: "absolute",
        bottom: "25%",
        display: "block",
        left: "0%",
        right: "0%",
        width: "83.5%",
        margin: " auto",
        [theme.breakpoints.down("xs")]: {
          bottom: "35%",
          width: "88%",
        },
    
        "& .MuiButton-label": {
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
    
          "& .MuiCircularProgress-root": {
            height: "20px",
            width: "20px",
            marginRight: "10px",
          },
        },
    },
    
    root: {
      position: "relative",
      backgroundColor: theme.palette.secondary.dark,
      minHeight: "100vh",
      [theme.breakpoints.up("sm")]: {
        padding: "2rem 0.2rem",
        "& .overlay": {
            display: "none",
        },
      },
      [theme.breakpoints.down("sm")]: {
        "& .MuiContainer-root": {
            paddingLeft: "0",
            paddingRight: "0",
        },
      },
    },
}));

这是_document.tsx文件

import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/styles";

class MyDocument extends Document {
  static async getInitialProps(ctx: any) {
    const sheet = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App: any) => (props: any) =>
            sheet.collect(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      ctx.renderPage(sheet);
    }
  }
  render() {
    return (
      <Html>
        <Head>
          <link
            rel="shortcut icon"
            type="image/png"
            href="../static/favicon.ico"
          />
          <style>{`body { margin: 0 } /* custom! */`}</style>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
        </Head>
        <body className="custom_class">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

这是_app.tsx 文件

import { ApolloProvider } from "@apollo/client";
import CssBaseline from "@material-ui/core/CssBaseline";
import { ThemeProvider } from "@material-ui/core/styles";
import Head from "next/head";
import React from "react";
import theme from "../src/theme";
import "../styles/styles.scss";
import { withApollo } from "../src/utils/apollo";
import App from "next/app";

class MyApp extends App<any> {
  componentDidMount() {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement!.removeChild(jssStyles);
    }
  }

  render() {
    const { Component, pageProps, apolloClient } = this.props;
    return (
      <>
        <Head>
          <title>Beauty wall spot</title>
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width"
          />
        </Head>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <ApolloProvider client={apolloClient}>
            <Component {...pageProps} />
          </ApolloProvider>
        </ThemeProvider>
      </>
    );
  }
}

export default withApollo(MyApp);

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

安装'npm install @mui/styles'

然后导入：import { makeStyles } from '@mui/styles';

【讨论】：