Style Redux Form 'Field' label

Question

I need to apply some styling to the label of a Redux Form Field. The Redux Form API doesn't mention any way to style the label. The classes.formField class gets applied to the field itself but not the label.

This may also be a question about forcing inheritance because the label, in this case, is not inheriting the parent's styles.

import { Field } from 'redux-form' import TextField from 'redux-form-material-ui/lib/TextField' <Field className={classes.formField} component={TextField} label={'style me!!'} fullWidth name="answer" required type="text" validate={[required]} />

Omar K · Accepted Answer · 2018-03-20 23:31:17Z

Add your own <CustomLabel /> component to the label prop.

<Field className={classes.formField} component={TextField} label={<CustomLabel/>} fullWidth name="answer" required type="text" validate={[required]} />

Make custom label component and pass it

const CustomLabel = () => { var labelStyle = { color: 'white', }; return <label style={labelStyle}> Im the custom label with css </label> }

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.

Ramon Balthazar · Accepted Answer · 2018-03-21 21:09:29Z

You can pass props directly to TextField using the props prop:

<Field component={TextField} props={{ className: classes.formField }} label={'style me!!'} fullWidth name="answer" required type="text" validate={[required]} />

Sadly this is undocumented on Redux-Form: Field docs :/

Collectives™ on Stack Overflow

Style Redux Form 'Field' label

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related