Блог

Главная - Вопросы по программированию - Пользовательский интерфейс Material неправильно работает с Next.js

Пользовательский интерфейс Material неправильно работает с Next.js

#reactjs #material-ui #next.js

Вопрос:

Вот с какими проблемами я столкнулся Next.js и пользовательский интерфейс материала, хотя я следую методам, упомянутым в документах пользовательского интерфейса материала.

  1. Я получаю эту ошибку, если я использую реквизит с 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;
  1. Медиа-запрос не работает в рабочей среде ( 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%",
        },
    
        "amp; .MuiButton-label": {
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
    
          "amp; .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",
        "amp; .overlay": {
            display: "none",
        },
      },
      [theme.breakpoints.down("sm")]: {
        "amp; .MuiContainer-root": {
            paddingLeft: "0",
            paddingRight: "0",
        },
      },
    },
}));

Here is _document.tsx file

 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);

Ответ №1:

Установите «npm install @mui/стили».

Затем Импорт: импорт { makeStyles } из «@mui/стили»;

Метки: