Gatsby: [v2] gatsby-plugin-jssの潜在的なバグ：SheetsRegistryをクリアする必要があります

説明

スタイルの特定の組み合わせでは、レンダリングされたページ間でSheetsRegistryをクリアする必要があります。

再現する手順

このレポジトリは単純化された複製を持ち、それに対する私の修正を追跡します：
https://github.com/cpboyd/gatsby-layout-mui-bug

注： SheetsRegistryリセットがどこで発生するかわかりません。 ToString()呼び出しの後に配置したのは、それを配置するのが最も簡単な場所のようだったからです。

期待される結果

ページは、Javascriptレンダリングと静的レンダリングの間で一貫してレンダリングする必要があります。

実結果

スタイルはごちゃ混ぜでした。

環境

システム：
OS：macOS High Sierra 10.13.6
CPU：x64 Intel（R）Core（TM）i7-8750H CPU @ 2.20GHz
シェル：3.2.57- / bin / bash
バイナリ：
ノード：10.9.0- / usr / local / bin / node
糸：1.9.4- / usr / local / bin / yarn
npm：6.4.0- / usr / local / bin / npm
ブラウザ：
Chrome：68.0.3440.106
Safari：11.1.2
npmPackages：
gatsby：^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-image：^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-google-analytics：^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-jss：^ 2.0.2-rc.0 => 2.0.2-rc.0
gatsby-plugin-layout：next => 1.0.0-rc.0
gatsby-plugin-manifest：^ 2.0.2-rc.0 => 2.0.2-rc.0
gatsby-plugin-offline：^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-react-helmet：^ 3.0.0-rc.0 => 3.0.0-rc.0
gatsby-plugin-sharp：^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-typescript：^ 2.0.0-rc.0 => 2.0.0-rc.1
gatsby-plugin-typography：^ 2.2.0-rc.0 => 2.2.0-rc.0
gatsby-remark-external-links：^ 0.0.4 => 0.0.4
gatsby-remark-images：^ 2.0.1-rc.0 => 2.0.1-rc.0
gatsby-remark-responsive-iframe：^ 2.0.0-rc.0 => 2.0.0-rc.0
gatsby-source-filesystem：^ 2.0.1-rc.0 => 2.0.1-rc.0
gatsby-transformer-json：^ 2.1.1-rc.0 => 2.1.1-rc.0
gatsby-transformer-備考：^ 2.1.1-rc.0 => 2.1.1-rc.0
gatsby-transformer-sharp：^ 2.1.1-rc.0 => 2.1.1-rc.0
npmGlobalPackages：
gatsby-cli：1.1.58

ファイルの内容（変更された場合）

gatsby-config.js ：該当なし
package.json ：該当なし
gatsby-node.js ：該当なし
gatsby-browser.js ：該当なし

元のgatsby-ssr.js APIは、ページをレンダリングするたびに新しいSheetsRegistry始まりました。

exports.replaceRenderer = (
  { bodyComponent, replaceBodyHTMLString, setHeadComponents },
  { theme = {} }
) => {
  const sheets = new SheetsRegistry()

  const bodyHTML = renderToString(
    <JssProvider registry={sheets}>
      <ThemeProvider theme={theme}>{bodyComponent}</ThemeProvider>
    </JssProvider>
  )

  replaceBodyHTMLString(bodyHTML)
  setHeadComponents([
    <style
      type="text/css"
      id="server-side-jss"
      key="server-side-jss"
      dangerouslySetInnerHTML={{ __html: sheets.toString() }}
    />,
  ])
}

これで、変数はファイルスコープになり、レンダリング間で存続するように見えます。

import React from "react"
import { JssProvider, SheetsRegistry, ThemeProvider } from "react-jss"

const sheets = new SheetsRegistry()

// eslint-disable-next-line react/prop-types,react/display-name
exports.wrapRootElement = ({ element }, { theme = {} }) => (
  <JssProvider registry={sheets}>
    <ThemeProvider theme={theme}>{element}</ThemeProvider>
  </JssProvider>
)

exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <style
      type="text/css"
      id="server-side-jss"
      key="server-side-jss"
      dangerouslySetInnerHTML={{ __html: sheets.toString() }}
    />,
  ])