reactjs - 将样式数组传递给 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>
}

Answer 2

您可以为此使用类名。例如：

import styles from './cssFile.css';
import classNames from 'classnames';

class Component extends React.Component {
  render() {
    return <div className={classNames(styles.spinner, styles.spinner_2)}></div>
  }
}

从类名文档中：

classNames 函数接受任意数量的参数，可以是字符串或对象。如果键的值是虚假的，则不会包含在输出中。