CODEWITHSUNDEEP
cssreactjsmaterial-uiredux-form
slotdp02
slotdp02

Reputation: 438

Style Redux Form 'Field' label

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]}
  />

Upvotes: 2

Views: 6657

Answers (2)

Ramon Balthazar
Ramon Balthazar

Reputation: 4290

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

Upvotes: 3

Omar
Omar

Reputation: 3411

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.

Upvotes: 4

Related Questions