सीएसएस मॉड्यूल मंडराना शैलियों जब एक और मॉड्यूल

Question

CSS modules साथ

एक प्रतिक्रिया/Webpack ऐप्लिकेशन में अंदर मैं अपनी ही .scss फ़ाइल में एक मॉड्यूल .card और एक अन्य मॉड्यूल .stat नामित जो एक सामग्री है .card में दिखाने के लिए।

मैं क्या निम्नलिखित को प्राप्त है, लेकिन 'सीएसएस-मॉड्यूल' जिस तरह से int करने के लिए की जरूरत है:

.card:hover .stat { 
    color: #000; 
} 

अगर मैं .stat मॉड्यूल के अंदर .card @import, .card सीएसएस के सभी .stat उत्पादन में फेंक दिया जाता है , लेकिन मैं केवल .card के लिए सही वर्ग नाम का उपयोग करने में सक्षम होना चाहता हूं।

समस्या को हल करने का सही तरीका क्या है?

Answer 1

हमारे पास सीएसएस मॉड्यूल के उपयोग में एक समान समस्या थी। मैं एक मुद्दा https://github.com/css-modules/css-modules/issues/102 खोलने के लिए और यह मेरे लिए सुझाव दिया गया था कि मैं निम्नलिखित में से किसी एक को क्या करना चाहिए:

1. क्लोन घटक और इसे करने के लिए एक नया className विशेषता जोड़ने और पुराने वर्ग के साथ नया वर्ग रचना:

   // Card.js 
   React.cloneElement(component, { 
       className: styles.card, 
   }); 
   
   // styles.cssmodule 
   .card { 
       composes: card from "...card.cssmodule"; 
   } 
   

2. लपेटें एक और तत्व में घटक है और इस के लिए classname जोड़ें:

   <div className={styles.card}><MyComponent /></div> 
   

मुझे इनमें से किसी भी दृष्टिकोण को पसंद नहीं आया और मैं सीएसएस-मॉड्यूल की ताकत का उपयोग करना चाहता हूं जो मॉड्यूल भाग है।

:import('...card.cssmodule`){ 
    importedCard: card; 
} 

:ref(.importedCard):hover .stat {...} 

Answer 2

एक समाधान React toolbox लोग हर घटक के लिए एक data-react-toolbox="component-name" या data-role="somerole" विशेषता जोड़ने और बजाय विशेषता को लक्षित करने के लिए एक दृष्टिकोण का उपयोग करते हैं: तो हम css-loader का एक कांटा है जो आप :ref() उपयोग करने के लिए आयातित वर्गों को संदर्भित करने की अनुमति देता है ऐसी स्थितियों के लिए आवश्यक कक्षाएं।