Question

我正在为我的项目使用cssModules，我试图通过这样的方式加载redux-form中的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>的有效道具。

用于redux-form的Field Array组件的CSS

2 个答案: