Gatsby: [v2] خطأ محتمل في برنامج gatsby-plugin-jss: يلزم مسح SheetsRegistry

وصف

باستخدام مجموعات معينة من الأنماط ، يجب مسح SheetsRegistry بين الصفحات المعروضة.

خطوات التكاثر

يحتوي هذا الريبو على نسخة مبسطة ويتتبع إصلاحي له:
https://github.com/cpboyd/gatsby-layout-mui-bug

ملاحظة: لست متأكدًا من مكان إعادة تعيين SheetsRegistry . لقد وضعته للتو بعد المكالمة ToString() لأن ذلك بدا أسهل مكان لوضعه فيه.

نتيجة متوقعة

يجب أن يتم عرض الصفحات بشكل متسق بين عرض جافا سكريبت والعرض الثابت.

نتيجة فعلية

كانت الأنماط مختلطة.

بيئة

نظام:
نظام التشغيل: macOS High Sierra 10.13.6
وحدة المعالجة المركزية: x64 Intel (R) Core (TM) i7-8750H CPU @ 2.20GHz
شل: 3.2.57 - / بن / باش
الثنائيات:
العقدة: 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
سفاري: 11.1.2
الحزم:
gatsby: ^ 2.0.0-rc.0 => 2.0.0-rc.0
صورة gatsby: ^ 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: 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-response-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-typecript: ^ 2.0.0-rc.0 => 2.0.0-rc.1
طباعة برنامج gatsby-plugin: ^ 2.2.0-rc.0 => 2.2.0-rc.0
gatsby-note-external-links: ^ 0.0.4 => 0.0.4
صور gatsby: ^ 2.0.1-rc.0 => 2.0.1-rc.0
gatsby- ملاحظات-مستجيبة- iframe: ^ 2.0.0-rc.0 => 2.0.0-rc.0
نظام ملفات جاتسبي المصدر: ^ 2.0.1-rc.0 => 2.0.1-rc.0
محول غاتسبي جسون: ^ 2.1.1-rc.0 => 2.1.1-rc.0
ملاحظة محول غاتسبي: ^ 2.1.1-rc.0 => 2.1.1-rc.0
محول شارب غاتسبي: ^ 2.1.1-rc.0 => 2.1.1-rc.0
الحزم:
غاتسبي كلي: 1.1.58

محتويات الملف (إذا تم تغييرها)

gatsby-config.js : غير متاح
package.json : غير متاح
gatsby-node.js : غير متاح
gatsby-browser.js : غير متاح

بدأت واجهة برمجة التطبيقات الأصلية gatsby-ssr.js بـ 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() }}
    />,
  ])