React CSS 模块的几个 CSS 文件
Several CSS files for react CSS modules
我有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})
您所要做的就是导入组件 css 文件和共享 css 文件,然后在传递给 CSSModules 之前将它们合并在一起。如果需要,您也可以在另一个模块中导入 sharedStyles 并以相同的方式使用它。
示例:
import styles from './styles.css'
import sharedStyles from './sharedStyles.css'
const tableStyles = {...styles, ...sharedStyles }
然后将新对象传入
CSSModules(Table, tableStyles)
我有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})
您所要做的就是导入组件 css 文件和共享 css 文件,然后在传递给 CSSModules 之前将它们合并在一起。如果需要,您也可以在另一个模块中导入 sharedStyles 并以相同的方式使用它。
示例:
import styles from './styles.css'
import sharedStyles from './sharedStyles.css'
const tableStyles = {...styles, ...sharedStyles }
然后将新对象传入
CSSModules(Table, tableStyles)