将样式数组传递给 React 组件

Question

我想使用 postcss-loader 和 css 模块将一组样式传递给 React 组件。我用于编译 css 文件的 webpack.config.file 如下所示：

loaders: [
    'style-loader', 
    'css-loader?modules&importLoaders=1&localIdentName[name]__[local]___[hash:base64:5]',
    'postcss-loader'
],

我的 React 组件文件如下所示：

import styles from './cssFile.css';
class Component extends React.Component{
    render(){
       return(
           <div className={[styles.spinner, styles.spinner_2]}></div>
       )
    }   
}

每当我只将一种样式传递给 className 时，它​​都会正确加载它，但是当我传递一个数组时，它不会解析任何样式。相反，它在编译类名称上用逗号连接它。

如何将多个样式传递给元素？

Answer 1

React 的 className 需要一个类名字符串，而不是一个数组：

import styles from './cssFile.css';
class Component extends React.Component{
    <div className={ [styles.spinner, styles.spinner_2].join(' ') }></div>
}