مشكلة في css عند تحديث الصفحة nextjs

عبد النور محمد · 6 سبتمبر 2021

أقوم بإنشاء تطبيق react باستخدام واجهة المستخدم materialui و nextjs. أنا أستخدم مكون <Autocomplete /> ، يتم توفيره بواسطة واجهة المستخدم materialui وتجاوز بعض أنماطه بأنماط خاصة بي مثل هذا:

<Autocomplete
  classes={{
    root: `${styles[`search__autocomplete`]} ${
      styles[`search--${variant}__autocomplete`]
    }`,
    inputRoot: `${styles[`search__autocomplete-input`]} ${
      styles[`search--${variant}__autocomplete-input`]
    }`
  }} 
/>

عند تحديث الصفحة ال css الخاص بالمكون للحظة ياتي مشوه ثم يرجع لحالته الطبيعية هل هناك حل للمشكلة

سامح أشرف · 6 سبتمبر 2021

يمكنك حل هذه المشكلة من خلال إنشاء ملف pages/_document.js مخصص، كالتالي:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import React from 'react';

// تنسيقات material-ui
import { ServerStyleSheets } from '@material-ui/core/styles';

class MainDocument extends Document {
  render() {
    return (
      <Html lang="ar">
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MainDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () => originalRenderPage({
    enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
  });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // يتم عرض  جزء الأنماط بعد انتهاء عرض التطبيق والصفحة.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

export default MainDocument;

بهذه الطريقة سوف تظهر التنسيقات بشكل سليم عند تحميل الصفحة.

Wael Aljamal · 8 سبتمبر 2021

يوجد مشكلة في استخدام مكتبة material ui مع nextjs ويمكن حلها بالتخلي عن react strict mode في ملف next.config.js

 module.exports = {
//   reactStrictMode: true, قم بازالته
 };

مشكلة في css عند تحديث الصفحة nextjs

السؤال

عبد النور محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية