Material-ui: بناء الإنتاج - تضارب الأسماء

لقد رأيت بالفعل بعض المشاكل حول هذه المشكلة. كان مرتبطًا دائمًا بمثيلات منشئ className المكرر. لا يسعني أكثر من دون الإنجاب.

أنا أغلق المشكلة الآن باعتبارها غير قابلة للتنفيذ. اسمحوا لي أن أعرف إذا كان لديك مثال استنساخ.

oliviertassinari لقد تمكنت من إعادة إنتاج المشكلة. هنا webpack bin - https://www.webpackbin.com/bins/-KuO6ia3h-JDpBOJncZ3

في حالتي ، لدي جذران للتطبيق مثبتان بشكل مستقل على قسمين مختلفين. كلاهما يستخدم نفس المادة-ui ThemeProvider مغلفة بـ JssProvider لتجاوز insertionPoint من _jss_.

بناءً على وظيفة createGenerateClassName ، يمكنك استخدام العداد للحصول على أسماء فئات فريدة

export default function createGenerateClassName(): generateClassName {
  let ruleCounter = 0;

  return (rule: Rule, sheet?: StyleSheet): string => {
    ruleCounter += 1;
    warning(
      ruleCounter < 1e10,
      [
        'Material-UI: you might have a memory leak.',
        'The ruleCounter is not supposed to grow that much.',
      ].join(''),
    );

    if (process.env.NODE_ENV === 'production') {
      return `c${ruleCounter}`;
    }

    if (sheet && sheet.options.meta) {
      return `${sheet.options.meta}-${rule.key}-${ruleCounter}`;
    }

    return `${rule.key}-${ruleCounter}`;
  };
}

وتؤكد لقطة الشاشة الخاصة بي أنه لسبب ما تم تكرار العداد.

انا بحاجة الى مساعدة. لا أعرف ما أفعله خطأ الآن.

darkowic تحتاج إلى مشاركة مثيل jss بين أشجار التفاعل المختلفة. يجب أن تكون جيدًا مع هذا التغيير.

oliviertassinari أعتقد أنني أفعل ذلك باستخدام ThemeProvider

  <JssProvider registry={context.sheetsRegistry} jss={context.jss}>
    <MuiThemeProvider
      theme={context.theme}
      sheetManage={context.sheetsManager}
      {...props}
    />
  </JssProvider>

أقوم بلف كل شجرة تفاعلية مع هذا.

يجب فتح هذه القضية.

بالتأكيد ، دعنا نلخص ما نعرفه حتى الآن. تظهر هذه المشكلة بمجرد استخدام شجرة عرض تفاعل متعددة. سيقوم موفر jss بإنشاء مولدين لاسم الفئة ، واحد لكل شجرة. ومن ثم ننتهي مع تعارض اسم الفئة.
kof هل يجب تمديد JssProvider من react-jss لقبول منشئ اسم الفئة؟

الحل البديل للتطبيق من جانب العميل: يمكنك إنشاء createGenerateClassName الخاص بك ونقل ruleCounter خارج وظيفة التضمين

import warning from 'warning';

// Returns a function which generates unique class names based on counters.
// When new generator function is created, rule counter is reset.
// We need to reset the rule counter for SSR for each request.
//
// It's an improved version of
// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
//
// Copied from material-ui due to issue https://github.com/callemall/material-ui/issues/8223

// This counter is moved outside from `createGenerateClassName` to solve the issue
let ruleCounter = 0;

export default function createGenerateClassName() {
  return (rule, sheet) => {
    ruleCounter += 1;
    warning(
      ruleCounter < 1e10,
      [
        'Material-UI: you might have a memory leak.',
        'The ruleCounter is not supposed to grow that much.'
      ].join('')
    );

    if (process.env.NODE_ENV === 'production') {
      return `c${ruleCounter}`;
    }

    if (sheet && sheet.options.meta) {
      return `${sheet.options.meta}-${rule.key}-${ruleCounter}`;
    }

    return `${rule.key}-${ruleCounter}`;
  };
}

رائع ، كان لدينا حالة استخدام على الخادم وكنت أخطط بالفعل للحصول على تلميح جريء في الوثائق ، انظر # 5

ولكنك الآن وجدت سببًا جيدًا لدعم مزودي تشغيل متوازيين.

نحتاج إلى البحث عما إذا كانت هناك حالات استخدام لحاجة قوية إلى عدة JssProviders متوازية. إذا كان هناك ، فنحن بحاجة إلى التفكير في شيء لدعمه.

kof لقد وجدت للتو حالة استخدام لـ JssProviders متعددة متوازية من جانب العميل. وأعتقد أن الحل المقترح سهل التنفيذ :).

نقل القاعدة: العداد خارج وظيفة الغلاف

هذا يعني أنه على الخادم ، لن تتم إعادة ضبط ruleCounter على الخادم. لا يمكننا فعل ذلك.

على جانب الخادم ، يحتاج JssProviders بالتأكيد إلى دعم العرض غير المتزامن المتزامن لشجرة التفاعل (حاجة قوية). لكن التنفيذ الحالي يجعله مدعومًا بالفعل :)

darkowic اقترح حلًا

يجب أيضًا أن يستجيب الطلب إلى نفس نقطة النهاية دائمًا بأسماء الفئات نفسها.

kof هل يجب علينا تمديد JssProvider من رد فعل-jss لقبول مولد اسم الفئة؟

1. نعم ، إحدى الطرق الممكنة هي السماح لـ JssProvider بقبول منشئ اسم فئة مثل هذا:

import {createGenerateClassName} from 'react-jss'

const generateClassName = createGenerateClassName()

<JssProvider generateClassName={generateClassName}>
  <App1 />
</JssProvider>

<JssProvider generateClassName={generateClassName}>
  <App2 />
</JssProvider>

1. هناك خيار آخر محتمل يتمثل في توفير بعض البادئة ، مثل اسم التطبيق. قد ينجح هذا إذا افترضنا أنه ليس لدينا عدد غير متوقع من التطبيقات.

<JssProvider classNamePrefix="app-1">
  <App1 />
</JssProvider>

<JssProvider classNamePrefix="app-2">
  <App2 />
</JssProvider>

برو 1:

• لا يحتاج المستخدم إلى توفير البادئة

برو 2:

• يمكن أن يمتلك المستخدم شيئًا ذا معنى في أسماء فئات DOM التي تحدد التطبيق أثناء التطوير
• يتمتع المستخدم بمزيد من التحكم في البادئة.
• من السهل نسبيًا أن يكون لديك بادئة غير متضاربة. إما أن يكون لديك عدد قليل من الأشجار الفرعية وأن التسمية سهلة بالفعل بدرجة كافية أو يمكنك إضافة بادئة رقم خاصة بك إلى تلك الأسماء وإعادة تعيينها عند كل طلب.

في الواقع ، من المنطقي أن يكون لديك كلا الدعامتين classNamePrefix و generateClassName . الأول من أجل التصحيح ، والثاني للتفرد الآلي لأسماء الفئات.

لقد واجهت هذه المشكلة عبر https://github.com/facebookincubator/create-react-app/issues/3173 (وحالة الاختبار المخفضة المرتبطة).

في حالتي ، تم تضمين مكون مادي يعتمد على واجهة المستخدم (v1.0.0-beta.11) في تطبيق يستخدم أيضًا واجهة المستخدم المادية (نفس الإصدارات). في التطوير ، يعمل هذا بشكل جيد ، ولكن في الإنتاج يتم كسر التخطيط بسبب أسماء الفئات المتضاربة.

لست متأكدًا مما إذا كان هذا مؤهلًا كـ "أشجار عرض متعددة للردود" وتحريك var ruleCounter = 0; قبل createGenerateClassName() _ لم يكن_ حلًا بديلًا للمشكلة ، ولكن مع التعليق على ما يلي ، _فعلت:

https://github.com/callemall/material-ui/blob/2361339fd6df9bfbb85ed2ee4da9d42ee6fee71c/src/styles/createGenerateClassName.js#L26 -L28

عُذْرًا ، لَمْ أَقْدِمْ عَلَى الْمَعْلُومَاتْ فِي الْوَقْتِ فَتْحَتُ # 7855.😊
يغطي هذا التعليق بشكل أساسي المشكلة التي واجهتها عند تشغيل بناء الإنتاج.

حل بديل لهذا في خط الأنابيب؟

تم إنشاء العلاقات العامة التي يجب أن تصلح هذا في رد فعل jss https://github.com/cssinjs/react-jss/pull/155

لذلك دعونا نلخص.

• darkowic "يتم وصف الصورة سبب القضايا الجذرية هنا: https://github.com/callemall/material-ui/issues/8223#issuecomment -331076580 وسوف تكون ثابتة بفضلkof الصورة PR: cssinjs / تتفاعل-JSS # 155 وسيتم إضافة تحذير جديد لمنع هذا الموقف في المستقبل: # 8341.

• أعراض مشكلة tlvince هي نفسها ، لكن السبب الأساسي مختلف. أنت تستخدم شجرة تصيير تفاعلية واحدة. يمكن ربطه بإصدار Material-UI مكرر مثبت. تحقق من تحذيراتك وإذا كان بإمكانك معرفة ما يحدث بالضبط ، يرجى فتح مشكلة أخرى.

• مشكلةRobophil غامضة للغاية بحيث لا يمكن اتخاذ إجراء بشأنها.

كان لدي اصطدام أسماء الفصل وإضافة بادئة في createGenerateClassName options حل المشكلة.

استخدمت هنا المستند الرائع والشامل

oliviertassinari شكرا على الملخص!

في شجرة تصيير تفاعل واحدة ، غالبًا ما تكون هذه المشكلة ناتجة عن إصدارات مختلفة من واجهة المستخدم المادية في جهازك. تأكد من التحقق من شجرة التبعية الخاصة بك وتحقق من استخدام إصدارات واجهة المستخدم المادية.

yarn list | grep material-ui

تكوين حزمة الويب الخاصة بي على النحو التالي

module.exports = {
    entry: {
        FirstComp: path.join(paths.JS, '/components/FirstComponent/MyFirstComp.js'),
        SecondComp: path.join(paths.JS, '/components/SecondComponent/MySecondComp.js'),
    },
}

لدي هذين المكونين ومكون مشترك تم إنشاؤه باستخدام خيار splitChunks.
لقد قمت بلف المكون الافتراضي الذي تم تصديره في MyFirstComp و MySecondComp باستخدام JSSProvider.
كيف يمكنني استخدام JSSProvider حول المكون المشترك؟

Sewdn أعتقد أيضًا أنه يمكن أن يكون ناتجًا عن إصدارات مختلفة من واجهة المستخدم المادية. تم تقديم مشكلة تعارض className هذه في تطبيقي أمس عندما بدأت في الترحيل إلى الخطافات وخطاف useStyles الذي تم إنشاؤه بواسطة makeStyles من @ material-ui / styles وهو 3.0.0-alpha.1
كما أنني كنت أستخدم "@ material-ui / core" والذي يبلغ 3.6.0

فجأة بدأت فصول التطبيق وفئات واجهة المستخدم المادية بـ jss1 ، مع العد بالتوازي. هذا من شأنه أن يخلط كل شيء. تم تصميم رأسي على سبيل المثال مع jss5 أيضًا باستخدام jss5 لنفترض MuiListItem.

بعد اتباع هذا الحل https://github.com/mui-org/material-ui/issues/8223#issuecomment -412349569 بواسطة iamhosseindhv ، أصبحت فئات مكونات mui مسبوقة بـ ac وتم حل المشكلة.

christiaanwesterbeek هل تستخدم خطوة التثبيت بشكل صحيح؟ نستخدم حقن التبعية. يلزم تشغيل المكالمة install() قبل استيراد كافة مكونات الترتيب الأعلى.

oliviertassinari أخشى أنني لا أعرف ما هي الخطوة التي تشير إليها. أيضًا ، لا أعرف ما هو جزء من install() وأين يجب استدعاؤه. سأكون سعيدًا لمعرفة المزيد عنها ، لكني بحاجة إلى معرفة مكان توثيقها.

christiaanwesterbeek أنا أشير إلى https://material-ui.com/css-in-js/basics/#migration -for-material-ui-core-users.

oliviertassinari يبدو أنه يجب استدعاء install() في ملف كل مكون؟ ربما نحتاج إلى وصف أكثر وضوحًا.

ربما أكون مخطئًا ، لا يمكن للتثبيت حل النزاعات.
To switch from the default style implementation to this newest version, you need to execute the following code before importing any Material-UI's components:

import { install } from '@material-ui/styles';

install();

oliviertassinari كيفية تثبيته before importing any Material-UI's components ؟
يتم دائمًا التعامل مع الاستيراد بواسطة babel و tsc بشكل ثابت

يتم رفع واردات الوحدات النمطية zheeeng ES إلى أعلى الوحدة النمطية ويتم حلها بشكل متزامن بالترتيب المحدد. لقد واجهنا نفس المشكلة مع وثائق Material-UI. كان الحل هو تجميع كل شيء في وحدة bootstrap.js واستيرادها أولاً:
https://github.com/mui-org/material-ui/blob/cb30b43e9c6cd49f9b16536a125456f5ea3a85c5/docs/src/modules/components/bootstrap.js#L1 -L13
إذا استمرت المشكلة ، من فضلك ، دعنا ننتقل إلى المناقشة لموضوع مختلف.

oliviertassinari لقد نقلت أمر الاستيراد من

// entry index.js
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import CssBaseline from '@material-ui/core/CssBaseline'
import { install } from '@material-ui/styles'

إلى

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { install } from '@material-ui/styles'
import CssBaseline from '@material-ui/core/CssBaseline'

يُبلغ الرمز عن الخطأ Cannot read property 'text' of undefined . بفحص كائن الموضوع ، يكون فارغًا.
إذا قمت بإعادة أمر الاستيراد مرة أخرى ، فإن هذا الجزء يعمل بشكل جيد.

const useStyles = makeStyles(
  (theme: Theme) => ({
    root: {
      flexShrink: 0,
      color: theme.palette.text.secondary,
    },
  }),
)

تحدث نفس المشكلة عندما أغلق التطبيق بالكامل بـ <StylesProvider>

تضمين التغريدة

يُبلغ الرمز عن الخطأ Cannot read property 'text' of undefined . بفحص كائن الموضوع ، يكون فارغًا.

كان لي نفس المشكلة. تم إصلاحه إما عن طريق ترقية "@ material-ui / core" إلى 3.6.0 أو @ material-ui / styles إلى 3.0.0-alpha.1. لقد نسيت أي. من الأفضل أن تفعل كليهما.

ومع ذلك ، فإن الموضوع الدقيق الذي ستحصل عليه الوظيفة التي تم تمريرها إلى makeStyles ، لم يكن هو الموضوع الذي قمت بإنشائه باستخدام createMuiTheme. بدلا من ذلك حصلت على الموضوع الافتراضي. ما انتهى بي الأمر هو عدم الاعتماد على أي موضوع سيتم تمريره. بدلاً من ذلك ، قمت باستيراد السمة في كل ملف احتاجته الأنماط.

christiaanwesterbeek لقد قمت بتثبيت @material-ui/[email protected] و @material-ui/styles/.0.0-alpha.2 وما زلت أعاني من هذه المشكلة.

يبدو أن هذا ليس له علاقة بهذه المشكلة (8223) قيد البحث. ولكن هنا يذهب على أي حال. ما عليك سوى استيراد السمة وعدم الاعتماد على تمريرها إلى الوظيفة التي تمررها إلى makeStyles . إنتهيت.

هل يمكن لأي شخص تأكيد ما إذا كانت خطوة التثبيت لا تزال مطلوبة مع الإصدار 3.7.0 (https://github.com/mui-org/material-ui/releases/tag/v3.7.0)

christiaanwesterbeek نعم ، هذا مطلوب. سنقوم بإزالة خطوة التثبيت في Material-UI v4.

oliviertassinari مرحبًا ، أواجه هذه المشكلة مع الإصدار الأخير v3.9.0 ، ولا أستخدم @ material-ui / styles ، ما زلت أستخدم withStyles من core لدي سؤالان .

1. هل يجب علي الانتقال الآن إلى mui / Styes أو الانتظار حتى إصدار v4. (تطبيق واسع النطاق)
2. باستخدام هذا الحل https://github.com/mui-org/material-ui/issues/8223#issuecomment -331081785 هل هي الطريقة الصحيحة للتعامل مع هذه المشكلة؟ إنه يعمل بشكل جيد في البناء أخيرًا ولكن لا يبدو أنه يفهم سبب حدوثه في المقام الأول.

شكر

أواجه هذه المشكلة مع أحدث إصدار v3.9.0

@ w3nda هذا عام للغاية ، هناك مليون سبب مختلف لحدوث هذه المشكلة.

هل يجب علي الانتقال الآن إلى mui / Styes أو الانتظار حتى إصدار v4. (تطبيق واسع النطاق)

قد نعود إلى منطق تجزئة اسم الفئة. في حين أنه يحسن الأداء على الخادم بشكل كبير ، إلا أن له تكلفة كبيرة على العميل. ربما سنقدم علامة لتمكينها بدلاً من ذلك. لذا لا ، أعتقد أن الخيار الأفضل هو حل المشكلة الأساسية. هل جربت هذه الصفحة https://material-ui.com/guides/server-rendering/#troubleshooting ؟

oliviertassinari شكرًا على الاستجابة السريعة ، أنا حقًا لا أعرف كيفية تصحيح المشكلة والرابط الذي ذكرته ليس مناسبًا لي لأنني أخدمه كموقع ثابت ..
مع أن التعليق الذي أشرت إليه ساعدني ، ألا يجب أن يخبرني عن سبب هذه المشكلة في حالتي؟

موقع @ w3nda Static له نفس المشكلة. تحتاج إلى إنشاء HTML ، لذلك سيستخدم واجهة برمجة تطبيقات العرض من جانب الخادم. إذا تسرب عداد الفهرس بين صفحتين ، فلن يكون اسم الفئة صحيحًا. حسنًا ، أعتقد أن منشئ اسم الفئة الأبطأ هو مقايضة جيدة مقارنة بالألم الذي يسببه تصحيح مثل هذه المشكلة (ومدى تكراره). لذا ، نعم ، يمكنك الترقية إلى @material-ui/styles ، إنها فتحة هروب بسيطة.

لقد عانيت للتو من مشكلة مماثلة وكانت عبارة عن استيراد مواد قديم في إحدى مكتباتنا. عملت بشكل جيد في وضع التطوير لكنها تعطلت في الإنتاج. أنا متأكد من أن هذا كان يعمل من قبل ، ولا أعرف ما إذا كان يمكن إصدار تحذير في هذه الحالة ، حتى لو كان من الواضح أنه خطأنا.
لقد قمت بتحديث الإصدارات لمطابقتها بين المشاريع وعمل كل شيء مرة أخرى.

مرحبًا ، أنا أستخدم مادة فقط لإدخال واحد وزر ونموذج على موقعي واضطررت إلى استخدام <JssProvider /> بعد هذا التعليق https://github.com/mui-org/material-ui/issues / 8223 # issuecomment -331412432

من المزعج أن تحتاج إلى موفر jss هذا ، فهل هناك إصلاح آخر يمكننا القيام به لا يؤدي إلى زيادة حجم الإصدار النهائي؟

kopax لماذا تستخدم JssProvider أجل؟

مرحبًا oliviertassinari ، في production قبل زيارة طريق آخر (نستخدم جهاز التوجيه التفاعلي ):

في production بعد زيارة طريق أو في development

يحدث شيء مشابه هنا مع نموذج (ظلال مربعة غريبة) ، نحتاج إلى زيارة صفحة أخرى للحصول على ملف css المناسب ، وهذا يحدث فقط في الإنتاج:

يتم إصلاح كلتا المشكلتين إذا أضفنا JssProvider . (تم التصحيح: لدينا نفس css في production منه في development )

ليس لدي أي فكرة. لا يمكنني المساعدة في المعلومات المقدمة.

كل شيء مكسور أيضا. لاحظت طلبًا خاطئًا لفئات jssXX في الإنتاج ونتيجة لذلك التصميم الخاطئ. يحدث ذلك بعد تحديث الصفحة.

لا يمكن العثور على السبب حتى الآن.

oliviertassinari ربما رد فعل[email protected] الذي

        "@material-ui/core": "^1.4.0",
        "@material-ui/icons": "^1.0.0",
        "material-ui-chip-input": "1.0.0-beta.6 - 1.0.0-beta.8",

هل يمكنك التأكد من أن Material-UI مجمعة مرة واحدة فقط؟ يمكن أن يؤدي استخدام نسختين في نفس الوقت إلى إنشاء نفس سلوك عربات التي تجرها الدواب.

حسنا. انه ممكن. نحن نستخدم react-admin وهو الإصدار الموصى به ~ 1.5.

لقد تمكنت من حل الخطأ في الإنتاج بإضافة JssProvider . الآن يمكنني تحديث الصفحة بشكل طبيعي.

import React from "react";
import { Admin, Resource } from "react-admin";
import JssProvider from "react-jss/lib/JssProvider";

const App = () => (
  <JssProvider>
    <Admin dataProvider={dataProvider}>
      <Resource name="trip" list={RequestsList} className="resourceItem" />
    </Admin>
  </JssProvider>
);

export default App;

andrewkslv هذا هو بالضبط ما نحاول تجنبه ، نفضل استخدامه بدون JssProvider لأننا نستخدم فقط مكوّنًا واحدًا Input و Button من @ material-ui ، بدلاً من ذلك نفضل استخدام واجهة مستخدم أخرى للباقي

oliviertassinari لقد راجعت للتو ولدي بعض مشكلات التبعيات. لقد أصلحته ولكن لا تزال هناك أخطاء في npm ls @material-ui/core :

├─┬ @bootstrap-styled/[email protected]
│ └── @material-ui/[email protected] 
├── @material-ui/[email protected] 
└─┬ [email protected]
  └── @material-ui/[email protected] 

بعد القيام:

rm -rf node_modules/@bootstrap-styled/ra-ui/node_modules/@material-ui/
rm -rf node_modules/ra-ui-materialui/node_modules/@material-ui/
npm ls @material-ui/core
├─┬ @bootstrap-styled/[email protected]
│ └── UNMET DEPENDENCY @material-ui/[email protected] 
├── @material-ui/[email protected] 
└─┬ [email protected]
  └── UNMET DEPENDENCY @material-ui/[email protected] 

ثم الآن يعمل (لا توجد مشكلة في css في الإنتاج). أعتقد أن هذا ليس ما أريده ...

مشروع ذو صلة @ تبعيات material-ui:

• @ bootstrap- style / [email protected]/package.json#L293
• رد فعل[email protected]/package.json#L44

هل لديك فكرة عما يجب فعله؟

kopax من الصعب معرفة ذلك بدون أي شيء يمكنني تصحيحه. أنا سعيد لسماع أنه يعمل الآن.

لقد لاحظت أنك تستخدم مكونات مصممة مع Material-UI. إذا كان لديك بعض الوقت ، فأنا أحب التحدث عن التكامل على Gitter.

حل العمل ليس طبيعيًا. مما يعني أنها تتضمن مهمة لا يمكن تشغيلها باستخدام npm. لن أستخدمه ، لقد أعطيت هذا كتلميح.

سنحظى بفرصة يوم الإثنين ، سألتحق بقناة mui gitter.

مرحبًا kopax ، هل تمكنت من إيجاد حل؟

لا ليس بعد. ليس بدون مزود. oliviertassinari أنا على

andrewkslv لقد react-admin و AWS Amplify. في أي وقت أقوم بنشر تطبيق رد الفعل الخاص بي على دلو S3 ، سيتعطل النمط بالكامل ، وقد أنقذني حلك حقًا.

نفس المشكلة هنا. لماذا تساعد إضافة JssProvider؟

لقد أضفت تحذيرًا في الإصدار 4 للتحذير عند استخدام مثيلات نمط مكررة: # 15422.

لا أدري، لا أعرف. لقد أثرت هذه المشكلة في react-admin عندما كانوا يطبقون نسخة جديدة من واجهة المستخدم المادية لإطار العمل ولكن تم تجاهلها.

https://github.com/marmelab/react-admin/pull/3102#issuecomment -484228320

أين يمكنني أن أجد الحل المتعلق ببناء الإنتاج - تعارض أسماء الفئات # 8223؟

شكر،

oliviertassinari تواجه هذه المشكلة مرة أخرى ، على الرغم من أنني اتبعت جميع التعليمات. نظرًا لأنه يعمل مع الآخرين ، أعتقد أنني قد أفتقد شيئًا أساسيًا.

https://stackoverflow.com/questions/58938080/jssprovider-not-generating-class-prefix-with-classnameprefix

أنا أستخدم الإصدارات التالية من الحزم.

"@ material-ui / core": "^ 4.6.1"،
"@ material-ui / icons": "^ 4.5.1"،
"رد فعل": "^ 16.12.0" ،
"رد فعل دوم": "^ 16.12.0" ،
"رد فعل- jss": "^ 10.0.0"،
"تفاعل البرامج النصية": "3.2.0"

تحديث: تم حل المشكلة. آسف لعدم المرور بالوثائق بدقة. هذا الجزء من الوثائق حل مشكلتي.

https://material-ui.com/styles/api/#creategenerateclassname -options-class-name-generator

لكن بطريقة ما ، حل JSSProvider الذي كان يعمل مع الآخرين ، لم يكن مناسبًا لي. على أي حال ، شكرا لك :)

شكرًا KannugoPrithvi ، هذا هو الحل الجيد! https://material-ui.com/styles/api/#creategenerateclassname -options-class-name-generator