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})

Steve Dodier-Lazaro · Accepted Answer · 2019-08-14 22:39:26Z

17

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)

edited Aug 14, 2019 at 22:39

Steve Dodier-Lazaro

1261 silver badge8 bronze badges

answered Feb 14, 2017 at 7:29

Joe Seifi

1,7451 gold badge15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Several CSS files for react CSS modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related