Plusieurs fichiers css pour les modules de réaction css

Question

J'ai 2 mêmes composants, qui sont un peu différents dans les styles, donc je veux réutiliser les styles communs, mais ne pas utiliser le glss css pour eux, comment puis-je y parvenir?

import React from 'react'; 
import commonStylesfrom '../common/table.css'; 
import styles from '../uniquesStyles.css'; 

export default class Table extends React.Component { 
    render() { 
     return <div styleName='table'> 
      <div styleName='something-diffrent'> 
       <div styleName='cell'>A0</div> 
       <div styleName='cell'>B0</div> 
      </div> 
     </div>; 
    } 
} 

//how can i combine 2 files here 
export default CssMudule(Table, {styles, commonStyles}) 

Answer 1

Tout ce que vous avez à faire est d'importer à la fois votre fichier css composant et votre fichier css partagé, puis de les fusionner ensemble avant de passer à CSSModules. Vous pouvez ensuite importer sharedStyles dans un autre module si vous en avez besoin et l'utiliser de la même manière.

Exemple:

import styles from './styles.css' 
import sharedStyles from './sharedStyles.css' 

const tableStyles = {...styles, ...sharedStyles } 

passe alors le nouvel objet dans

CSSModules(Table, mergedStyles)