Как использовать Material UI с Next. js? - PullRequest
Новая
       120

Как использовать Material UI с Next. js?

1 голос
/ 14 июля 2020

Я хочу использовать Next. js с Material UI в моем приложении React. Я следил за официальным интерфейсом Material UI Next. js exmaple .

Хотя, когда я пытаюсь запустить next dev или next build, возникает следующая ошибка.

Я запустил npm ls react, чтобы убедиться, что у меня только одна версия react, и подтвердил, что react-dom и react были одной и той же версией (6.13.1).

Кажется, рассматривая originalRenderPage как крючок. Хотя официальная Next. js документация также содержит подробные сведения о настраиваемой странице документа и содержит такой же originalRenderPage в компоненте класса.

enter image description here

I have tried converting the _document.js component into a functional component rather than a class, but it does not work.

The contents of the _document.js page (directly from the Material UI/Next.js example above) are:

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/core/styles";
import theme from "../components/theme";

export default class MyDocument extends Document {
    render() {
        return (
             { / * Основной цвет PWA * /}   ); }} // `getInitialProps` принадлежит` _document` (вместо `_app`), // он совместим с генерацией на стороне сервера (SSG). MyDocument.getInitialProps = asyn c (ctx) => {// Порядок разрешения // // На сервере: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4 .app.render // 5. page.render // 6. document.render // // На сервере с ошибкой: // 1. document.getInitialProps // 2. app.render // 3. page.render / / 4. document.render // // На клиенте // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render // Отрисовываем приложение и страницу и получаем контекст страницы с собранными побочными эффектами. константные листы = новый ServerStyleSheets (); const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage ({EnhanceApp: (App) => (props) => sheet.collect ( ),}); const initialProps = ждать Document.getInitialProps (ctx); return {... initialProps, // Фрагмент стиля визуализируется после завершения рендеринга приложения и страницы sh. стили: [... React.Children.toArray (initialProps.styles), sheet.getStyleElement ()],}; };
...