مشكلة في 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;

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

8 سبتمبر 2021

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

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

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

السؤال

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

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

Recommended Posts

سامح أشرف

Wael Aljamal

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية