Material UI 和 Next.js 设置

Question

Material UI 和 Next.js 设置

似乎设置 Next.js 和 MUI 的“方法”是删除服务器端样式，所以我在 _app.tsx 中完成了它

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement?.removeChild(jssStyles);
    }
  }, []);
  return <Component {...pageProps} />;
}

export default MyApp;

Run Code Online (Sandbox Code Playgroud)

也在 _document.tsx 中做到了

import { ServerStyleSheets } from '@mui/styles';
import Document, { Head, Html, Main, NextScript } from 'next/document';
import React from 'react';

export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang='en'>
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () => {
    return originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });
  };
  const initialProps = await Document.getInitialProps(ctx);
  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

Run Code Online (Sandbox Code Playgroud)

但它仍然不起作用，Material UI 与 makeStyles 的更改不生效。jssStyles变量也始终为 null，所以这可能是问题所在，但我找不到解决方案。

Answer 1

You*_*zef 5

最好的方法是从mui github克隆示例存储库，然后从那里开始。如果没有，那么只需检查它们_app.tsx并_document.tsx确保您已安装所有依赖项。请注意，他们也使用该@emotion包。

Javascript 存储库链接在这里，Typescript 存储库链接在这里

归档时间：	3 年，10 月前
查看次数：	2677 次
最近记录：	3 年，5 月前