反應css模塊的幾個css文件

Question

我有兩個相同的組件，這些組件在樣式上有點不同，所以我想重用常見的樣式，但不會使用gloval css for他們，我該如何實現它？

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) 

新對象