반응 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

당신이 할 수있는 일은 다음 함께 CSSModules에 전달하기 전에 병합, 구성 요소의 CSS 파일을 공유 CSS 파일을 모두 가져올 수 있습니다. 그런 다음 필요에 따라 다른 모듈에서도 sharedStyles를 가져 와서 같은 방식으로 사용할 수 있습니다.

예 :

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

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

다음

CSSModules(Table, mergedStyles) 

에서 새로운 객체를 전달할