Как интегрировать NextJS + Styled-компоненты с Material-UI

1. Создать приложение next.js, используя стилизованные компоненты, очень просто. Вам просто нужно использовать их фрагмент _document.js для включения SSR и предотвращения мерцания стилей при загрузке страницы: https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js

2. Создать приложение next.js с использованием material-ui почти так же просто. Вам просто нужно начать с базы проекта: https://github.com/mui-org/material-ui/tree/master/examples/nextjs, которая имеет собственную реализацию на _document.js: https://github. ком /MUI-орг/материал-UI/BLOB/Master/примеры/nextjs/страницы/_document.js

3. К сожалению, я не мог понять, как "объединить" обе реализации и получить следующее приложение, в котором компоненты styled-components и material-ui могут сосуществовать, SSR и не мерцать при загрузке страницы.

Вы можете мне помочь? Есть ли в Интернете кто-то с лучшими способностями, чем у меня, который уже решил эту проблему, но я не знаю о чем?

Заранее спасибо.

Ответ 1

Попробуйте это

_document.js

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components'
import { ServerStyleSheets } from '@material-ui/styles';
import theme from '../src/theme';

class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const styledComponentsSheet = new ServerStyleSheet()
    const materialSheets = new ServerStyleSheets()
    const originalRenderPage = ctx.renderPage;

    try {
        ctx.renderPage = () => originalRenderPage({
            enhanceApp: App => props => styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />))
          })
        const initialProps = await Document.getInitialProps(ctx)
        return {
          ...initialProps,
          styles: (
            <React.Fragment>
              {initialProps.styles}
              {materialSheets.getStyleElement()}
              {styledComponentsSheet.getStyleElement()}
            </React.Fragment>
          )
        }
      } finally {
        styledComponentsSheet.seal()
      }
  }

  render() {
    return (
      <html lang="en" dir="ltr">
        <Head>
          <meta charSet="utf-8" />
          {/* Use minimum-scale=1 to enable GPU rasterization */}
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
          />
          {/* PWA primary color */}
          <meta
            name="theme-color"
            content={theme.palette.primary.main}
          />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

export default MyDocument;

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

Для проверки обновлений https://github.com/MarchWorks/nextjs-with-material-ui-styled-components

Ответ 2

Это решение отлично работает для серверной части, для клиентской части также необходимо изменить порядок впрыска, как описано здесь: https://material-ui.com/customization/css-in-js/#css-injection-order

Чтобы это работало с next.js, вам нужно изменить присвоение константы jss следующим образом:

const jss = create({
  ...jssPreset(),
  insertionPoint: process.browser
    ? window.document.getElementById('jss-insertion-point')
    : null
})

Ответ 3

вот мой файл _document.js выглядит так:

    import Document from "next/document";
    import { ServerStyleSheet } from "styled-components";

    export default class MyDocument extends Document {
      static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet();
      const originalRenderPage = ctx.renderPage;

      try {
        ctx.renderPage = () =>
          originalRenderPage({
            enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
          });
        const initialProps = await Document.getInitialProps(ctx);

        return {
          ...initialProps,
          styles: (
            <>
              {initialProps.styles}
              {sheet.getStyleElement()}
            </>
          )
        };
      } finally {
        sheet.seal();
      }
    }
  }

и ниже найдите мой файл .babelrc:

{ 
  "presets": ["next/babel"], 
  "plugins": [
      ["styled-components", { "ssr": true }]
   ]
}