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

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

9 голосов
/ 11 марта 2019

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.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

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

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

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

Ответы [ 2 ]

11 голосов
/ 12 марта 2019

Попробуйте

_document.js 

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import flush from 'styled-jsx/server';
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 sheet = new ServerStyleSheet()
    const sheets = new ServerStyleSheets()
    const originalRenderPage = ctx.renderPage;

    try {
        ctx.renderPage = () => originalRenderPage({
            enhanceApp: App => props => ({...sheet.collectStyles(<App {...props} />), ...sheets.collect(<App {...props} />)})
          })
        const initialProps = await Document.getInitialProps(ctx)
        return {
          ...initialProps,
          styles: (
            <React.Fragment>
              {sheets.getStyleElement()}
              {sheet.getStyleElement()}
              {flush() || null}
            </React.Fragment>
          )
        }
      } finally {
        sheet.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

0 голосов
/ 15 апреля 2019

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

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

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