Revamp your Redux Form with a fresh new 'Field' label style

Question

Revamp your Redux Form with a fresh new 'Field' label style

Is there a way to style the label of a Redux Form field? The Redux Form API does not provide information on how to apply styles to the label. Despite applying the classes.formField class, the label itself remains unstyled.

Could this be an issue with inheritance, where the label is not inheriting styles from its parent?

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

css reactjs material-ui redux-form

Answer 1

Answer №1

Create a unique custom label component to add to the label property.

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

  />

Define a custom label component and use it in the code snippet below:

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 provided as an object where the key is camelCased and the value is often a string.

Answer 2

Create a unique custom label component to add to the label property.

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

  />

Define a custom label component and use it in the code snippet below:

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 provided as an object where the key is camelCased and the value is often a string.

Answer 3

Answer №2

When using the TextField component, you have the option to pass props directly through the props prop like this:

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

Interestingly, this feature is not mentioned in the Redux-Form: Field documentation. Disappointing :/

Answer 4

When using the TextField component, you have the option to pass props directly through the props prop like this:

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

Interestingly, this feature is not mentioned in the Redux-Form: Field documentation. Disappointing :/

Revamp your Redux Form with a fresh new 'Field' label style

Answer №1

Answer №2

Similar questions

Exploring the Benefits of Using Gatsby with Material-UI: The Importance of Creating a Page

My React project is unable to import the foundation SCSS file into the App.scss file

NextJS page navigation with React tabs - incorrect display update issue

SWR - Error: Attempting to access properties of an undefined value

The unresolvable IE7 Z-Index dilemma caused by a bug within nested elements!

Can I add different tags directly inside a div container in Bootstrap 3 without using .row and .col?

What methods are there for incorporating a sub-component from a React client into a React server component?

Error occurred during module build: SyntaxError: An unexpected token was found, a comma was expected

Applying CSS styles to a shadow DOM element will not produce the desired visual

Modify the color of a week row using a static date picker

Commencing CSS Animation Post Full Page Loading

Access denied when attempting to install software packages

Troubleshooting empty req.body in NODE.JS within a MERN application

Responsive cards using Bootstrap styling

placing a vertical bootstrap button along the left border

In HTML, a Bootstrap row appears on top of another row when viewing on mobile devices

Conceal virtual keyboard on mobile when in autocomplete box focus

What is the inner workings behind server side rendering in Next.js?

Is it possible to establish a CSS minimum width that is relative to a different element?

The functionality of jQuery smooth scrolling to an anchor is only effective when the page is at the top and there is