Несколько css-файлов для реактивных модулей css

Question

У меня есть два одинаковых компонента, которые немного отличаются по стилям, поэтому я хочу повторно использовать общие стили, но не хочу использовать для них gloval css, как я могу это достичь?

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

Все, что вам нужно сделать, это импортировать как файл компонента CSS и ваш общий файл CSS, а затем объединить их вместе, прежде чем перейти к CSSModules. Затем вы можете импортировать sharedStyles в другой модуль, если вам нужно и использовать его таким же образом.

Пример:

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

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

затем передать новый объект в

CSSModules(Table, mergedStyles)