CSS for Field Array component in redux-form

Question

I am using cssModules for my project and I am trying to load the css for the FieldArray component in redux-form by doing something like this:

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

the above is my css for the below and that doesn't work.

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

this gives me an error saying that the propType styleName is not valid. But I am able to use the same styling with Field component.

but if I try to add css inline, it works perfectly fine.

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

is in styles.css,

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

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

And make sure you webpack config css-modules correctly, the code up there must be work

Answer 2

This has nothing to do with redux-form . The error message is telling you the truth. styleName is not a valid prop for <div> .