Several CSS files for react CSS modules

Question

I have 2 same components, which are a little different in styles, so I want to reuse common styles, but don't want to use global CSS for them, how can I achieve it?

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

All you have to do is import both your component css file and your shared css file, then merge them together before passing to CSSModules. You can then import sharedStyles in another module as well if you need and use it the same way.

Example:

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

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

then pass the new object in

CSSModules(Table, tableStyles)