用于Redux形式的字段数组组件的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 {
  ...
}

在styles.css中，

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

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

并确保您正确打包了webpack配置css-modules，那里的代码必须可以正常工作

Answer 2

这与redux-form无关。 错误消息告诉您真相。 styleName不是<div>的有效属性。