className in <Field> in Redux Form - redux

Question

I've created a redux-form and i want to add className to each Field to customize them with css.
The code for each field is:
<Form onSubmit={handleSubmit(requestAccountsFilter)}>
<FormGroup row>
<Field
id="symbol"
name="symbol"
type="text"
component={inputField}
placeholder="Enter Product Here"
/>
<Field id="side" name="side" component={inputField} type="select">
<option value={null}>Any</option>
<option value="Buy">Buy</option>
<option value="Sell">Sell</option>
</Field>
<Field id="status" name="status" component={inputField} type="select">
<option value={null}>Any</option>
<option value="Working">Working</option>
<option value="Completed">Completed</option>
</Field>
<Button name="submit-btn" className="filter-submit-btn" color="danger" type="submit">
Submit
</Button>
</FormGroup>
</Form>
I've added a className tag but i see that neither the placeholder i've added is shown nor the className. How can i customize each field?

Answer 1

<Field
type="text"
className="myClass"
component={InputField}
placeholder="Type here..."
/>
and your custom InputField should be something like
(I've taken this example from http://redux-form.com/6.5.0/examples/submitValidation/)
export const InputField = ({ input, type, placeholder, className, meta: { touched, error } }) => (
<div>
<input {...input} placeholder={placeholder} type={type} className={className}/>
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)
or a better approach, if too many props are there, You can use object destructuring
export const InputField = (field) => (
<div>
<input {...field.input} {...field} />
{field.meta.touched && field.meta.error && <span className="error">{field.meta.error}</span>}
</div>
)
{...field} will extract all props that you have passed in Field.
You can take a look at this official redux-form example: http://redux-form.com/6.5.0/examples/react-widgets/ to get more idea.
Hope it helps :)

Answer 2

You can use object destructuring method to set className.
<Field
type="text"
input={{className:'red'}}
component={InputField}
placeholder="Type here..."
/>

Answer 3

I realize that you are using a custom renderer by saying component={InputField}, but for others coming here (since I can't find it in the docs): if you are using one of the built-in renderers like component="input" or component="select", you can just add className and the renderer will apply it, e.g.:
<Field name="foo" component="select" className="form-control">
</Field>

Answer 4

By definition, whatever you pass to the Field component should be passed to the InputField component as input prop. So, your InputField Component should look something like this:
<div>
<InputField {...field.input} > {field.children} </InputField>
{field.meta.touched && field.meta.error && <span className="error">
{field.meta.error}</span>}
</div>