4

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 にスタイルを 1 つだけ渡すと、正しくロードされますが、配列を渡すと、それらのいずれも解決されません。代わりに、コンパイル クラス名にコンマを付けて連結します。

複数のスタイルを要素に渡すにはどうすればよいですか?

4

2 に答える 2

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 関数は、文字列またはオブジェクトの任意の数の引数を取ります。キーの値が偽の場合、出力に含まれません。

于 2016-10-14T08:47:20.100 に答える