How do I apply CSS to redux-form fields?

Question

How do I apply any type of CSS to redux-form Field components? className and class are silently ignored:

        <div>
          <label>Name</label>
          <div>
            <Field
              className="form-input"
              name="formContactName"
              component="input"
              type="text"
              placeholder="Person to contact"
            />
          </div>
        </div>

I was able to the apply the styles by creating a custom component:

        <div>
          <label>Name</label>
          <div>
            <Field
              name="formContactName"
              component={ customInput }
            />
          </div>
        </div>

but that's a major PITA and also largely negates the gains of using redux-form in the first place. Am I missing something? Note I added the className assignments directly in the custom component - I realize I can send them through as props in Field.

I tried setting input styles globally but they were ignored as well. The redux-form website docs tell you everything you need to know to use the rig but make no mention of CSS that I can see...

Thanks,

JB

Edit: this is not a duplicate - the answer pointed to uses a custom input component. As stated above, I can get that to work, but then there's really no need for redux-form in the first place.

@Jay: I was able to get this to work with a custom component by grabbing the code from the online docs:

class MyCustomInput extends Component {
  render() {
    const { input: { value, onChange } } = this.props
    return (
      <div>
        <label htmlFor="formContactName" className="col-sm-2 control-label">Name:</label>
        <div className="col-sm-10">
          <input
            id="formContactName"
            placeholder="Person to contact"
            className="form-control"
            type="text"
          />
        </div>
      </div>
    )
  }
}

and then, in the redux-form Form code:

    <div>
      <label>Name</label>
      <div>
        <Field
          name="formContactName"
          component={ MyCustomInput }
        />
      </div>
    </div>

The bootstrap settings via className worked fine using this method.

Possible duplicate of [className in in Redux Form](https://stackoverflow.com/questions/42200542/classname-in-field-in-redux-form) — Danziger, Dec 16 '17 at 18:15
It is not a duplicate. The "answer" posted above uses a custom component. — Omortis, Dec 16 '17 at 18:40
@Omortis, please clarify, how are you styling? are you giving class names and importing CSS files into components or do you have a global CSS file? — Javed, Dec 16 '17 at 19:23
@Jay - I am building the relevant Bootstrap css from src/less with grunt and have a very small custom.css file for some corner cases. Either method is fine but I can't seem to get any CSS to stick when applied to `Field`. — Omortis, Dec 16 '17 at 20:05
@Omortis did you check it in React Dev Tools if the class name is being applied to React Component or not? If its being applied then the problem might be in your CSS — Javed, Dec 16 '17 at 20:07
@Jay actually you are close - the bootstrap styles do get set via `className`, but my custom css does not, though I use it all over the application. In the browser dev tools I can see the `className` set but apparently the css import does not carry through. Thanks! This is almost certainly the answer if you want to re-post. — Omortis, Dec 16 '17 at 20:21
what happens if you declare styles and override the wanted ones?? — weisk, Dec 17 '17 at 01:46
@frankies I was just about to try that when I got it to work (see above). Thanks! — Omortis, Dec 17 '17 at 17:02

score 1 · Answer 1 · answered Dec 16 '17 at 18:40

1

All your custom props would be passed to the input component, so you can do

const CustomTextField = props => {
  const { input, label, type, meta: { touched, error }, ...other } = props

  return (
    <TextField
      label={label}
      type={type}
      error={!!(touched && error)}
      helperText={touched && error}
      { ...input }
      { ...other }
    />
  )
}

And then you can pass any props, including className to the CustomTextField

<Field
  name="some"
  component={CustomTextField}
  className="css-applied"
/>

answered Dec 16 '17 at 18:40

Dmitriy Kovalenko

3,437
3
19
39

That's more or less what I did. I would prefer to not have to create custom components. Is there no way to stylize the vanilla redux-form input controls? – Omortis Dec 16 '17 at 18:42
I am looking to do the same but unable to find a way to style the vanilla redux form input. – overloading Dec 23 '17 at 06:59

How do I apply CSS to redux-form fields?

1 Answers1