Material-ui: उत्पादन का निर्माण - वर्ग नाम संघर्ष

मैंने पहले ही इस समस्या के आसपास कुछ मुद्दा देखा है। यह हमेशा डुप्लिकेटेड क्लासनाम जनरेटर के उदाहरणों से जुड़ा हुआ था। मैं प्रजनन के बिना अधिक मदद नहीं कर सकता।

मैं इस मुद्दे को अभी के लिए बंद कर रहा हूं क्योंकि यह कार्रवाई योग्य नहीं है। मुझे पता है अगर आप एक प्रजनन उदाहरण है।

@oliviertassinari I समस्या को पुन: पेश करने में सक्षम था। यहाँ वेबपैक बिन है - https://www.webpackbin.com/bins/-KuO6ia3h-JDpBOJncZ3

मेरे मामले में, मेरे पास 2 एप्लिकेशन रूट्स हैं जो स्वतंत्र रूप से 2 अलग-अलग डिव में घुड़सवार हैं। दोनों _jss_ से insertionPoint ओवरराइड करने के लिए JssProvider साथ लिपटे समान सामग्री-यू ThemeProvider उपयोग करते हैं।

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 हमें वर्ग नाम जनरेटर को स्वीकार करने के लिए react-jss से JssProvider का विस्तार करना चाहिए?

क्लाइंट-साइड एप्लिकेशन के लिए काम करें: आप अपना 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

लेकिन अब आपको वास्तव में 2 समानांतर चलने वाले प्रदाताओं का समर्थन करने का एक अच्छा कारण मिला।

अगर कई समानांतर JssProviders की मजबूत आवश्यकता के लिए उपयोग के मामले हैं, तो हमें अनुसंधान करने की आवश्यकता है। यदि वहाँ हैं, तो हमें इसका समर्थन करने के लिए कुछ सोचने की आवश्यकता है।

@ कॉफ़ आपको क्लाइंट पक्ष पर कई समानांतर JssProviders के लिए उपयोग मामला मिला है। और मुझे लगता है कि प्रस्तावित समाधान को लागू करना आसान है :)।

आवरण समारोह के बाहर नियम का पालन करें

इसका मतलब यह होगा कि सर्वर पर, रूकावट कभी भी रीसेट नहीं होगी। हम ऐसा नहीं कर सकते।

सर्वर साइड पर, JssProviders को निश्चित रूप से एक प्रतिक्रिया ट्री (मजबूत आवश्यकता) के समवर्ती async प्रतिपादन का समर्थन करने की आवश्यकता है। लेकिन वर्तमान कार्यान्वयन इसे पहले से ही समर्थित बनाता है :)

@darkowic ने एक वर्कअराउंड प्रस्तावित किया जिसका अंतर्निहित स्टैक तक कोई पहुँच नहीं है। हम कर। हम इस अतिरिक्त लचीलेपन के साथ बेहतर कर सकते हैं: एक वर्ग नाम जनरेटर उदाहरण स्वीकार करना।

एक ही अंतिम बिंदु के लिए भी अनुरोध हमेशा एक ही वर्ग के नाम के साथ जवाब देना चाहिए।

@kof क्या हमें क्लास नाम के जेनरेटर को स्वीकार करने के लिए प्रतिक्रिया-Jss से JssProvider का विस्तार करना चाहिए?

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) को एक ऐप में शामिल किया गया था जो सामग्री-यूआई (समान संस्करण) का भी उपयोग करता है। विकास में, यह ठीक काम करता है, लेकिन उत्पादन में लेआउट परस्पर विरोधी वर्ग नामों के कारण टूट गया है।

मुझे यकीन नहीं है कि अगर यह "एकाधिक प्रतिक्रिया देने वाले पेड़" के रूप में अर्हता प्राप्त करता है और createGenerateClassName() var ruleCounter = 0; से पहले चल रहा है, तो समस्या को हल न करें, लेकिन निम्नलिखित टिप्पणी करते हुए, _did_ काम करें:

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

क्षमा करें, मैं # 7855. I के खुलने के समय अधिक जानकारी नहीं दे सका
यह टिप्पणी मूल रूप से उस मुद्दे को शामिल करती है जिसका मैंने उत्पादन निर्माण के दौरान सामना किया था।

पाइपलाइन में इसके लिए वर्कअराउंड?

एक पीआर बनाया, जो इसे प्रतिक्रिया-जेडएसएस में तय करना चाहिए https://github.com/cssinjs/react-jss/pull/155

तो चलिए योग करते हैं।

• @darkowic के मुद्दों का मूल कारण यहां वर्णित है: https://github.com/callemall/material-ui/issues/8223#issuecomment -331076580 और @kof के पीआर के लिए धन्यवाद तय किया जाएगा: cssinjs / reaction-jss # 155 और भविष्य में इस स्थिति को रोकने के लिए एक नई चेतावनी जोड़ी जाएगी: # 8341।

• @tlvince के मुद्दे लक्षण समान हैं, लेकिन मूल कारण अलग है। आप एकल प्रतिक्रिया रेंडर ट्री का उपयोग कर रहे हैं। इसे इंस्टॉल किए गए डुप्लिकेट मटेरियल-यूआई संस्करण से जोड़ा जा सकता है। अपनी चेतावनियों की जाँच करें और यदि आप यह पता लगा सकते हैं कि क्या चल रहा है, तो कृपया एक और मुद्दा खोलें।

• @ रोबोफिल का मुद्दा कार्रवाई के लिए बहुत अस्पष्ट है।

मेरे पास टकराने वाले उपनाम थे और createGenerateClassName विकल्पों में एक उपसर्ग जोड़ने से समस्या हल हो गई।

यहाँ महान, व्यापक डॉक्टर

सारांश के लिए @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'),
    },
}

मेरे पास ये दो घटक हैं और एक सामान्य घटक है जो विभाजन विकल्प का उपयोग करके बनाया गया है।
मैंने JSSProvider का उपयोग करके MyFirstComp और MySecondComp में डिफ़ॉल्ट निर्यात किए गए घटक को लपेटा।
मुझे सामान्य घटक के चारों ओर JSSProvider का उपयोग कैसे करना चाहिए?

@ मुझे भी लगता है कि यह विभिन्न सामग्री-यूआई संस्करणों के कारण हो सकता है। इस क्लासनेम संघर्ष की समस्या को कल मेरे ऐप में पेश किया गया था जब मैंने हुक और माइग्रेट शुरू कर दिए थे । यू-स्टाइल / स्टाइल से
इसके अलावा मैं "@ सामग्री-यूआई / कोर" का उपयोग कर रहा था जो 3.6.0 पर है

अचानक मेरी ऐप कक्षाएं और सामग्री-यूआई कक्षाएं दोनों को जेएस 1 के साथ शुरू किया गया, समानांतर में गिनती हुई। वह सब कुछ मिला देगा। Jss5 के साथ उदाहरण के लिए मेरा हैडर भी MuiListItem कहते हैं की jss5 के साथ स्टाइल किया गया था।

इस समाधान पालन करने के बाद https://github.com/mui-org/material-ui/issues/8223#issuecomment मुई-घटकों के वर्गों @iamhosseindhv द्वारा -४१२३४९५६९ एसी के साथ उपसर्ग गया और समस्या को हल किया गया था।

@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 कैसे स्थापित करें?
आयात हमेशा बेबल द्वारा नियंत्रित किया जाता है और सांख्यिकीय रूप से tsc करता है

@ ज़ेहेइंग ईएस मॉड्यूल आयात मॉड्यूल के शीर्ष पर फहराए जाते हैं और उन्हें परिभाषित किए गए क्रम में समान रूप से हल किया जाता है। हम सामग्री-यूआई प्रलेखन के साथ एक ही मुद्दे का सामना कर रहे हैं। समाधान सब कुछ bootstrap.js मॉड्यूल में पैकेज करना था और इसे पहले आयात करना था:
https://github.com/mui-org/material-ui/blob/cb30b43e9c6cd49f9b16536a125456f5a3a85c5/docs/src/mrcules/compenders/bootstrap.js#L1 -L13 -L13
यदि समस्या बनी रहती है, तो कृपया चर्चा को एक अलग मुद्दे पर ले जाएं।

@oliviertassinari I से आयात करने का आदेश आया

// 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> साथ पूरे एप्लिकेशन को लपेटता हूं

@zheeeng

कोड त्रुटि Cannot read property 'text' of undefined । विषय वस्तु का निरीक्षण करके, यह खाली है।

मुझे भी यही समस्या थी। इसे या तो "@ सामग्री-यूआई / कोर" को 3.6.0 या @ सामग्री-यूआई / शैलियों को अपग्रेड करके तय किया गया था, जो 3.0.0-अल्फा 1 है। मैं जो भूल गया। बेहतर है दोनों करें।

हालाँकि, सटीक विषय जो फ़ंक्शन मेक स्टाइल के लिए पास हुआ था, वह थीम नहीं था, जिसे मैंने createMuiTheme के साथ बनाया था। इसके बजाय इसे डिफ़ॉल्ट विषय मिला। मैंने जो कुछ किया वह इस बात पर निर्भर नहीं था कि जो भी विषय पास होगा। इसके बजाय मैंने हर फाइल में थीम आयात की जिसे शैलियों की आवश्यकता थी।

@christiaanwesterbeek मैंने @material-ui/[email protected] और @material-ui/styles/.0.0-alpha.2 और अभी भी यह मुद्दा है।

यह हाथ में इस मुद्दे (8223) से असंबंधित लगता है। लेकिन यहाँ वैसे भी जाता है। बस थीम आयात करें और उस फ़ंक्शन पर पारित होने पर भरोसा न करें जिसे आप makeStyles । और आपने कल लिया।

क्या कोई पुष्टि कर सकता है कि अभी भी v3.7.0 (https://github.com/mui-org/material-ui/releases/tag/v3.7.0) के साथ इंस्टॉल स्टेप आवश्यक है या नहीं

@christiaanwesterbeek हाँ, यह आवश्यक है। हम सामग्री-UI v4 में इंस्टॉलेशन चरण को हटा देंगे।

@oliviertassinari हे, मैं इस मुद्दे को नवीनतम withStyles core रहा हूं, मेरे दो प्रश्न हैं ।

1. क्या मुझे अब mui / स्टाइल में माइग्रेट करना चाहिए या v4 रिलीज़ की प्रतीक्षा करनी चाहिए। (बड़े पैमाने पर ऐप)
2. इस समाधान का उपयोग करके https://github.com/mui-org/material-ui/issues/8223#issuecomment -331081785 इस समस्या से निपटने का उचित तरीका है? यह अंत में निर्माण में ठीक काम करता है, लेकिन यह समझ में नहीं आता है कि यह पहली जगह में क्यों हो रहा है।

धन्यवाद

मैं इस मुद्दे को नवीनतम v3.9.0 के साथ अनुभव कर रहा हूं

@ w3nda यह बहुत सामान्य है, इस समस्या के होने का एक लाख अलग कारण है।

क्या मुझे अब mui / स्टाइल में माइग्रेट करना चाहिए या v4 रिलीज़ की प्रतीक्षा करनी चाहिए। (बड़े पैमाने पर ऐप)

हम classname हैशिंग तर्क को वापस कर सकते हैं। हालांकि यह सर्वर पर प्रदर्शन को बेहतर बनाता है, क्लाइंट पर इसकी महत्वपूर्ण लागत होती है। शायद हम इसके बजाय इसे सक्षम करने के लिए एक ध्वज प्रदान करेंगे। तो नहीं, मुझे लगता है कि कोर मुद्दे को हल करने के लिए सबसे अच्छा विकल्प है। क्या आपने इस पृष्ठ का प्रयास किया https://material-ui.com/guides/server-rendering/#troublesourcing ?

@oliviertassinari तेजी से प्रतिक्रिया के लिए धन्यवाद, मैं वास्तव में समस्या को डीबग करना नहीं जानता और आपके द्वारा बताई गई लिंक मेरे लिए प्रासंगिक नहीं है क्योंकि मैं इसे एक स्थिर साइट के रूप में सेवा करता हूं।
जिस टिप्पणी का मैंने हवाला दिया, उससे मुझे मदद मिली, क्या यह मेरे मामले में इस मुद्दे का कारण नहीं बताना चाहिए?

@ w3nda स्टेटिक वेबसाइट में एक ही मुद्दा है। आपको HTML उत्पन्न करने की आवश्यकता है, इसलिए यह सर्वर-साइड रेंडरिंग एपीआई का उपयोग करेगा। यदि इंडेक्स काउंटर दो पृष्ठों के बीच लीक होता है, तो कक्षा का नाम सही नहीं होगा। खैर, मुझे लगता है कि एक धीमी श्रेणी का नाम जनरेटर दर्द की तुलना में एक अच्छा ट्रेडऑफ़ है जो इस तरह की समस्या को दूर करने के लिए है (और यह कितनी बार है)। तो, हाँ, आप @material-ui/styles अपग्रेड कर सकते हैं, यह एक सरल एस्केप हैच है।

मुझे बस इसी तरह की समस्या थी और यह एक पुरानी सामग्री-यूई आयात था जो हमारे पुस्तकालयों में से एक में था। इसने विकास मोड में अच्छा काम किया लेकिन उत्पादन में टूट गया। मुझे पूरा यकीन है कि यह पहले काम कर रहा था, मुझे नहीं पता कि इस मामले में चेतावनी जारी की जा सकती है, भले ही यह स्पष्ट रूप से हमारी गलती हो।
मैंने परियोजनाओं के बीच मिलान करने के लिए संस्करणों को अपडेट किया और सब कुछ फिर से काम किया।

नमस्ते, मैं अपनी साइट पर केवल एक इनपुट, बटन और फॉर्म के लिए सामग्री का उपयोग कर रहा हूं और मुझे इस टिप्पणी के बाद <JssProvider /> का उपयोग करना था https://github.com/mui-org/material-ui/issues / 8223 # जारीकरण -331412432

यह इस jss प्रदाता की आवश्यकता के लिए कष्टप्रद है, क्या कोई और फिक्स है जो हम कर सकते हैं जो कि अंतिम बिल्ड साइज़ को नहीं बढ़ाएगा?

@kopax क्या आप JssProvider लिए उपयोग कर रहे हैं?

हाय @oliviertassinari , किसी अन्य मार्ग पर जाने से पहले production (हम प्रतिक्रिया-राउटर का उपयोग करते हैं):

production किसी रूट पर जाने के बाद या development

यहाँ कुछ ऐसा ही होता है जो एक फॉर्म (अजीब बॉक्स छाया) के साथ होता है, हमें उचित सीएसएस के लिए किसी अन्य पृष्ठ पर जाने की आवश्यकता होती है, जो कि सामान्य रूप से होता है:

यदि हम JssProvider जोड़ते हैं, तो दोनों समस्याएँ तय हो गई हैं। (निश्चित: हमारे पास production development तुलना में समान css है)

मुझे पता नहीं है। मैं दी गई जानकारी के साथ मदद नहीं कर सकता।

सब कुछ भी टूट गया है। मैं उत्पादन में गलत क्रम 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",

क्या आप यह सुनिश्चित कर सकते हैं कि सामग्री-यूआई केवल एक बार बंडल किया

कुंआ। यह संभव है। हम 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 घटक का उपयोग करते हैं इसके बजाय, हम प्रतिक्रिया-व्यवस्थापक के लिए बाकी 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] 

फिर अब यह काम करता है (उत्पादन में कोई सीएसएस मुद्दा नहीं)। मुझे लगता है कि यह वह नहीं है जो मैं चाहता हूं ...

संबंधित परियोजना @ सामग्री-उई निर्भरता:

• @ बूटस्ट्रैप-स्टाइल / [email protected]/package.json#L293
• [email protected]/package.json#L44

कोई विचार कि क्या करना चाहिए?

@kopax यह मुश्किल है कि मैं कुछ डिबग कर सकता हूं। मुझे यह सुनकर खुशी हो रही है कि यह अब काम कर रहा है।

मैंने देखा है कि आप सामग्री-यूआई के साथ स्टाइल-घटकों का उपयोग कर रहे हैं। यदि आपके पास कुछ समय है, तो मुझे Gitter पर एकीकरण के बारे में चैट करना पसंद होगा।

काम कर समाधान स्वाभाविक नहीं है। इसका मतलब यह है कि इसमें ऐसे कार्य शामिल हैं जिन्हें npm के साथ नहीं चलाया जा सकता है। मैं इसका उपयोग नहीं करूंगा, मैंने इसे संकेत के रूप में दिया।

हमें सोमवार को मौका मिलेगा, मैं मुई गटर चैनल से जुड़ूंगा।

हाय @ kopax , आप एक समाधान खोजने के लिए प्रबंधित किया था?

नहीं अभी तक नहीं। प्रदाता के बिना नहीं। @oliviertassinari मैं

@andrewkslv आपके समाधान ने वास्तव में मेरे लिए काम किया। मैं react-admin और AWS एम्पलीफाय का भी उपयोग कर रहा हूं। कभी भी मैं अपनी प्रतिक्रिया एप्लिकेशन को S3 बाल्टी में तैनात करूंगा, शैली सभी टूट जाएगी, और आपके समाधान ने वास्तव में मुझे बचा लिया।

एक ही मुद्दा यहाँ। क्यों JssProvider जोड़ने में मदद करता है?

मैंने v4 में चेतावनी जोड़ दी है जब चेतावनी दी गई है कि डुप्लिकेट शैली के उदाहरणों का उपयोग किया जाता है: # 15422।

मुझे नहीं पता। मैंने इस मुद्दे को react-admin में उठाया जब वे फ्रेम के लिए सामग्री यूआई के एक नए संस्करण को लागू कर रहे थे लेकिन इसे नजरअंदाज कर दिया गया था।

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

मैं उत्पादन निर्माण के बारे में समाधान कहां पा सकता हूं - क्लासनेम का विरोध # 8223?

धन्यवाद,

@oliviertassinari इस मुद्दे को फिर से सामना करना, भले ही मैंने सभी निर्देशों का पालन किया हो। चूंकि यह दूसरों के लिए काम कर रहा है, मुझे लगता है कि मुझे कुछ बुनियादी याद आ रही है।

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

मैं संकुल के निम्नलिखित संस्करणों का उपयोग कर रहा हूँ।

"@ सामग्री-उई / कोर": "^ 4.6.1",
"@ सामग्री-यूआई / आइकन": "^ 4.5.1",
"प्रतिक्रिया": "^ 16.12.0",
"प्रतिक्रिया-डोम": "^ 16.12.0",
"प्रतिक्रिया-जेडएस": "^ 10.0.0",
"प्रतिक्रिया-स्क्रिप्ट": "3.2.0"

अद्यतन: समस्या हल हो गई। प्रलेखन के माध्यम से अच्छी तरह से नहीं जाने के लिए क्षमा करें। प्रलेखन के इस भाग ने मेरी समस्या हल कर दी।

https://material-ui.com/styles/api/#creategenerateclassname-options- वर्ग-नाम-जनरेटर

लेकिन किसी भी तरह, JSSProvider समाधान जो अन्य सभी के लिए काम कर रहा था, मेरे लिए काम नहीं कर रहा था। वैसे भी, धन्यवाद :)

धन्यवाद @KannugoPrithvi , यह अच्छा समाधान है! https://material-ui.com/styles/api/#creategenerateclassname-options- वर्ग-नाम-जनरेटर