将样式数组传递给React组件

我想使用postcss-loader和css模块将样式数组传递给React组件。我编译CSS文件webpack.config.file看起来是这样的：将样式数组传递给React组件

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

我的阵营组件文件看起来是这样的：

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

每当我路过只有一个样式的className它正确，但是当它加载我传递一个数组并不能解决它们中的任何一个。相反，它将它与编译类名称上的逗号连接起来。

如何将几种样式传递给元素？

来源

2016-08-17 Diego Gallegos

它可能只是在您粘贴的代码中，但您的类语法无效，您需要定义一个渲染方法并返回React元素。除了那个@ ori-drori在说className必须是一个字符串时是正确的。 – riscarrott

阵营的预计的className类名称的字符串，而不是数组：

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

来源

2016-08-17 23:50:51

您可以使用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> 
    } 
}

从类名的文件：

的类名函数采用任何数量的参数，其可以是串或对象。如果密钥的值是虚假的，则输出中不会包含。

来源

2016-10-14 08:47:20

将样式数组传递给React组件

回答

相关问题