reactjs - 用于反应 CSS 模块的几个 CSS 文件

Question

我有2个相同的组件，样式有点不同，所以我想重用常用样式，但不想为它们使用全局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 之前将它们合并在一起。如果需要，您也可以在另一个模块中导入 sharedStyles 并以相同的方式使用它。

例子：

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

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

然后将新对象传入

CSSModules(Table, tableStyles)