Razzle: ترطيب الأنماط لا يتم التقديم بشكل صحيح

تم إنشاؤها على ٣ أكتوبر ٢٠١٨ · 5تعليقات · مصدر: jaredpalmer/razzle

محبة razzle ، هذه أداة عظيمة.

أواجه مشكلة حيث أقوم بإعداد واجهة المستخدم المادية وكل شيء يعمل _ رائعًا_ باستثناء شيء واحد: عند زيارة صفحة فرعية وتحديث الصفحة يعطيني صفحة ذات أنماط بسيطة فقط. إنه في الواقع خطأ رائع لأنه اعتمادًا على الصفحة التي تم فتحها من آخر yarn start ، لن يتم عرض هذه الصفحة بشكل صحيح إلا إذا تم تحديثها ، ولكن إذا قمت بالتنقل والتحديث فلن يعمل (حتى على مسار الجذر).

ابدأ الخادم بـ yarn start
انتقل إلى http://localhost:3000/blog-posts على سبيل المثال
قم بتحديث الصفحة (كل شيء يبدو هراء)
اقتل الخادم (اترك نافذة المتصفح مفتوحة)
ابدأ الخادم بـ yarn start
قم بتحديث الصفحة وستبدو جميلة (عرض كل شيء بشكل صحيح)
انتقل إلى _any_ صفحة أخرى
تحديث ، يبدو مثل حماقة ... وكرر.

لقد جربت yarn build && yarn start:prod وتم تشغيل النظام ، ولكن فقط مع الحد الأدنى من الأنماط. ومع ذلك ، إذا وجدت رابطًا وقمت بالنقر فوقه ، فسيبدو التطبيق بأكمله جميلًا مرة أخرى.

أفترض أنها مشكلة تتعلق بالهيدرات أو ربما مزيج من ذلك و @material-ui/core/styles/withStyles . هل يواجه أي منكم هذه المشكلة؟

تختلف الفئات (يتم عرض html ) عند تحميل الصفحة اللاحق مما يعني أنه من المحتمل أن يكون مرتبطًا بالتحميل الأولي للأنماط / الفئات المتشابهة التي أعلم أنها تتعلق بالمناقشات التالية:

وحدة CSS التجريبية https://github.com/stereobooster/razzle-cssmodules
https://github.com/jaredpalmer/razzle/issues/428
https://github.com/jaredpalmer/razzle/issues/705

ومع ذلك ، كما يظهر وضعي أعلاه ، يبدو أنه يعمل في بعض الوقت مما يجعلني أعتقد أنه أقرب مما تظهره تلك المناقشات. أفكار؟

مصدر

panbanda

التعليق الأكثر فائدة

قد تعتقد أنه بعد ساعات طويلة مملة من البحث وتصحيح الأخطاء ، سيكون الأمر أكثر إرضاءً ، لكن الإصلاح يستخدم أساسًا after.js ، رد فعل jss ، لتوليد Document ثم السطر في الأسفل من هذا الموضوع (حول MuiThemeProvider الذي يرتبط MUI فقط):

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

نرجو أن تتجنبوا الألم. : ص

panbanda في ٨ أكتوبر ٢٠١٨

🎉4

ال 5 كومينتر

Hahahaha لقد واجهت نفس المشكلة مع Material UI في Razzle 😢

CharlyJazz في ٣ أكتوبر ٢٠١٨

❤4

CharlyJazz هذا withStyles والالتحاق بالفئات المتشابهة؟

panbanda في ٦ أكتوبر ٢٠١٨

  static async getInitialProps({ assets, data, renderPage }) {
    const generateClassName = createGenerateClassName()
    const jss = create(jssPreset())

    const page = await renderPage(App => props => (
      <JssProvider jss={jss} generateClassName={generateClassName}>
        <MuiThemeProvider sheetsManager={new Map()}>
          <App {...props} />
        </MuiThemeProvider>
      </JssProvider>
    ))

    return { assets, data, ...page }
  }

نرجو أن تتجنبوا الألم. : ص

panbanda في ٨ أكتوبر ٢٠١٨

🎉4

jaredpalmerjylinman أليس من الممكن لخلق مثال على ذلك لتوثيق عبة محيرة؟

CharlyJazz في ٨ أكتوبر ٢٠١٨

لأي شخص آخر يعاني من هذه المشكلة ، يمكنني أن أوصي بشدة باتباع مستندات Material-UI SSR الرسمية: https://material-ui.com/guides/server-rendering/