时间戳

首页 > 解决方案 > 如何将 Material UI v5 连接到 Next JS v12？

reactjs - 如何将 Material UI v5 连接到 Next JS v12？

问题描述

最近，Material UI 5 发布了。_document.js以前（在 Material UI 4 中），我曾经通过修改和来连接它_app.js。Material UI 5 也一样吗？

用于 MUI v4_app.js

import CssBaseline from '@material-ui/core/CssBaseline';
import {ThemeProvider} from '@material-ui/core/styles';

class MyApp extends App {

   render() {
      const {Component, pageProps, router} = this.props;

      return (
          <ThemeProvider>
             <CssBaseline />
              <Component {...pageProps}/>
          </ThemeProvider>
      )
   }
}

export default MyApp

用于 MUI v4_document.js

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

export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
      const initialProps = await Document.getInitialProps(ctx);
      let props = {...initialProps};

      return props;
   }

   render() {
      return (
          <Html>
             <body>
             <Main/>
             <NextScript/>
             </body>
          </Html>
      );
   }
}


MyDocument.getInitialProps = async (ctx) => {
   const sheets = new ServerStyleSheets();
   const originalRenderPage = ctx.renderPage;

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

   const initialProps = await Document.getInitialProps(ctx);

   return {
      ...initialProps,
      // Styles fragment is rendered after the app and register rendering finish.
      styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
   };
};

我想问的是：我应该以同样的方式将它连接到 MUI v5 吗？

也许有更优雅的方式来做到这一点？

标签： reactjsmaterial-uinext.js

解决方案

如果它只是您要从@materail-ui/core/styles中导入的 CSS，您可以直接在您的_App.jswith...中直接导入 CSS。

import '@materail-ui/core/styles/someFilename.css'（from不需要）并且应该可以从那里在您的应用程序中的任何地方访问它。

推荐阅读