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

Ensure that the context is used to effectively clear any existing data from the previous bar chart

deployJava.js injects a new <embed> element into the header section of the webpage

Is it possible to populate the blank cells in the weekday columns for previous and following months in a mat-datepicker or mat-calendar's display?

What is the best way to connect my React application, which is being developed with webpack, to a phpMyAdmin external database for querying without exposing my database password within the code?

Should I consider using an UI framework when initiating a React project?

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

What is the best way to incorporate a sliding effect into my cookie form?

What is the most efficient way to incorporate a new field into numerous documents once the mongoose schema has been updated?

ERROR: The value property is undefined and cannot be read in a ReactJS component

The parameter of type '{ userInfo: string | null; }' cannot be assigned to type 'never' in this argument

Manipulate container (div) to reveal and conceal

Establishing a secure websocket connection to MQTT in Next.js

Transfer the @font-face declaration from the global CSS file into the MUI Theme

Issues concerning the application of Nextjs and tailwind styling have arisen

Customizing the input field to have a width of 100%

Is it possible to implement custom classes in @apply within a SCSS file in a Tailwind Next.js project?

Validating file uploads with Ant Design in ReactJS

Rendering a component inside an accordion that was generated within a loop using React

Sending data with React using POST request

Using Material-UI in a project without the need for create-react-app