リアクションコンポーネントへのスタイル配列の受け渡し

Question

postcss-loaderとcssモジュールを使用して、リアクションコンポーネントにスタイルの配列を渡したいと思います。 cssファイルをコンパイルするための私のwebpack.config.fileは、次のようになります。それは正しくなく、ときにそれをロードし、私はクラス名に一つだけのスタイルを渡すたび

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

：

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{ 
    <div className={ [styles.spinner, styles.spinner_2].join(' ') }></div> 
} 

Answer 1

は、classNameがクラス名の文字列ではなく、配列を期待の反応します。例：クラス名のドキュメントから

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> 
    } 
} 

：

クラス名関数が 文字列またはオブジェクトとすることができる任意の数の引数をとります。キーの値が偽であれば、出力には は含まれません。

Answer 2

あなたはこのためにclassnamesを使用することができます。