CSS stili hover modulo quando all'interno di un altro modulo

Question

In un Reagire/Webpack app con CSS modules ho un modulo .card nel proprio file .scss e un altro modulo chiamato .stat che è un contenuto per essere iscritte nel .card.

cosa devo realizzare quanto segue, ma int modo 'css-moduli':

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

Se @import .card all'interno del modulo .stat, tutto il .card css viene scaricato nel .stat uscita , ma voglio solo essere in grado di utilizzare il nome classe corretto per il .card.

Qual è il modo corretto per risolvere il problema?

Answer 1

Abbiamo riscontrato un problema simile nel nostro utilizzo dei moduli CSS. Apro un problema https://github.com/css-modules/css-modules/issues/102 ed è stato suggerito a me che devo fare sia uno dei seguenti modi:

1. Clone il componente e aggiungere un nuovo attributo className ad esso e comporre la nuova classe con la vecchia classe:

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

2. Avvolgere il componente di un altro elemento e aggiungere il nome di classe a questo:

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

Non mi piaceva nessuno di questi approcci e mi piacerebbe usare la forza dei moduli css che è la parte dei moduli. Così abbiamo un fork del css-loader, che permette di utilizzare :ref() per fare riferimento a classi importate:

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

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

Answer 2

Come soluzione React toolbox ragazzi utilizzano un approccio di aggiungere un attributo data-react-toolbox="component-name" o data-role="somerole" per ogni componente e indirizzare l'attributo invece di classi dove necessario per tali situazioni.