Gatsby: [v2] gatsby-plugin-jss 的潜在错误：需要清除 SheetsRegistry

描述

对于某些样式组合，应在呈现的页面之间清除 SheetsRegistry。

重现步骤

这个 repo 有一个简化的复制并跟踪我的修复：
https://github.com/cpboyd/gatsby-layout-mui-bug

注意：我不确定应该在哪里重置SheetsRegistry 。 我只是将它放在ToString()调用之后，因为这似乎是最容易放置它的地方。

预期结果

页面应该在 Javascript 呈现和静态呈现之间呈现一致。

实际结果

样式乱七八糟。

环境

系统：
操作系统：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
浏览器：
铬：68.0.3440.106
Safari：11.1.2
npm 软件包：
盖茨比：^2.0.0-rc.0 => 2.0.0-rc.0
盖茨比图像：^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: 下一个 => 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-源文件系统：^2.0.1-rc.0 => 2.0.1-rc.0
gatsby-transformer-json: ^2.1.1-rc.0 => 2.1.1-rc.0
盖茨比变压器备注：^2.1.1-rc.0 => 2.1.1-rc.0
gatsby-transformer-sharp: ^2.1.1-rc.0 => 2.1.1-rc.0
npmGlobalPackages：
盖茨比-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() }}
    />,
  ])