反応CSSモジュール用の複数のCSSファイル

Question

2つの同じコンポーネントがありますが、スタイルが少し違っていますので、共通のスタイルを再利用したいのですが、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に渡す前にそれらをマージしてください。共有スタイルを必要に応じて同じ方法で別のモジュールにインポートすることもできます。

例：

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

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

次いで

CSSModules(Table, mergedStyles) 

に新しいオブジェクトを渡し