web-dev-qa-db-ja.com

Nextjs + styled-componentsをmaterial-uiと統合する方法

1。スタイルが設定されたコンポーネントを使用してnext.jsアプリを構築するのはとても簡単です。 _document.jsスニペットを使用してSSRを有効にし、ページの読み込み時にスタイルがちらつくのを防ぐだけです： https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages /_document.js

2。material-uiを使用してnext.jsアプリを構築するのは、ほとんど同じくらい簡単です。プロジェクトベースから始める必要があります： 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。残念ながら、両方の実装を「マージ」して、styled-componentsとmaterial-uiコンポーネントの両方を含む次のアプリを取得する方法を理解できませんでしたSSRが共存でき、ページの読み込み時にちらつきません。

手伝って頂けますか？インターネット上で私の問題よりも優れた能力を持ち、すでにその問題を解決している人がいますか？

前もって感謝します。

material-uistyled-componentsnext.js
13
Alevardi

このソリューションはサーバー側で正常に機能し、クライアント側では、次のドキュメントに記載されているように、注入順序も変更する必要があります。 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
})
1
emik