CSS

Question

私は私のプロジェクトのためにcssModulesを使用していますが、私はこのような何かを行うことによってReduxの形式でFieldArrayコンポーネントのCSSをロードしようとしています：

.container { 
    display: 'flex', 
    alignItems: 'center', 
    justifyContent: 'space-between', 
    flexDirection: 'row', 
    paddingTop: 15, 
} 

上記私のCSSの下にあり、それは動作しません。

<div 
    key={index} 
    styleName="container" 
> 
<Field 
    component={Dropdown} label="" orientation="vertical" 
    name={`${callerIds}.countryId`} fieldArray 
    labelKey="country" valueKey="id" searchable={false} 
    className="row-popup" options={countries} 
/> 
<Field 
    component={TextField} label="" orientation="vertical" 
    name={`${callerIds}.value`} fieldArray 
    className="row-popup" 
/> 
</div> 

これは、propType styleNameが無効であるとエラーします。しかし、私はFieldコンポーネントで同じスタイリングを使用することができます。

しかし、私がcssインラインを追加しようとすると、それは完全に正常に動作します。

<div 
    key={index} 
    style={{ 
    display: 'flex', 
    alignItems: 'center', 
    justifyContent: 'space-between', 
    flexDirection: 'row', 
    paddingTop: 15, 
    }} 
> 
<Field 
    component={Dropdown} label="" orientation="vertical" 
    name={`${callerIds}.countryId`} fieldArray 
    labelKey="country" valueKey="id" searchable={false} 
    className="row-popup" options={countries} 
/> 
<Field 
    component={TextField} label="" orientation="vertical" 
    name={`${callerIds}.value`} fieldArray 
    className="row-popup" 
/> 
</div> 

Answer 1

.container { 
    ... 
} 

import styles from 'the-styles-path/styles.css'; 

<div 
    key={index} 
    classNmae={styles.container} 
> 

そして、あなたは正しく設定CSS-モジュールをWebPACKの、コードのアップが仕事

Answer 2

がなければならない。これは何の関係もありませんことを確認し、Styles.cssをしていますredux-formとなります。エラーメッセージはあなたに真実を伝えています。 styleNameは<div>の有効な支柱ではありません。