CSS-Modul schweben Stile, wenn in einem anderen Modul

Question

In einer Reaktion/Webpack App mit CSS modules ich ein Modul .card in seiner eigenen .scss Datei und ein anderes Modul namens .stat, die einen Gehalt ist in den .card gezeigt werden.

Was ich brauche die folgenden, zu erreichen, aber die 'CSS-Module' Art und Weise int:

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

Wenn ich .card innerhalb des .stat Modul @import, die alle die .card css in die .stat Ausgabe abgeladen , aber ich möchte nur den korrekten Klassennamen für die .card verwenden können.

Was ist der richtige Weg, um das Problem zu lösen?

Answer 1

Wir hatten ein ähnliches Problem bei der Verwendung von CSS-Modulen. Ich öffne ein Problem https://github.com/css-modules/css-modules/issues/102 und es wurde mir vorgeschlagen, dass ich entweder eine der folgenden Aktionen ausführen sollte:

1. die Komponente Clone und fügen Sie ein neues Attribut classname, um es und die neue Klasse mit der alten Klasse zusammensetzen:

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

2. Wickeln Sie die Komponente in einem anderen Element und fügen Sie den Klassennamen dazu:

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

Mir gefiel keiner dieser Ansätze und ich würde gerne die Stärke von css-modules verwenden, was der Modulteil ist. So haben wir eine Gabel des css-loader, die Sie :ref() verwenden können importierte Klassen verweisen:

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

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

Answer 2

Als Abhilfe können React toolbox Jungs einen Ansatz verwenden, um ein data-react-toolbox="component-name" oder data-role="somerole" Attribut auf jede Komponente hinzuzufügen und Ziel das Attribut statt Klassen, wo für solche Situationen notwendig.