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'
],

My React Component文件如下所示：

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

您可以使用classnames。例如：

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函数接受任意数量的参数，可以是a 字符串或对象。如果密钥的值是假的，它就不会包括在输出中。

将样式数组传递给React Component

2 个答案: