Style Redux Form 'Field' 标签

Question

我需要对 Redux 表单字段的标签应用一些样式。 Redux 表单 API 没有提到任何设置标签样式的方法。 classes.formField class 应用于字段本身而不是标签。

这也可能是关于强制继承的问题，因为在这种情况下，标签没有继承父项的样式。

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

Answer 1

将您自己的 <CustomLabel /> 组件添加到标签属性中。

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

  />

制作自定义标签组件并传递它

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.

Answer 2

您可以使用 props 道具将道具直接传递给 TextField：

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

遗憾的是，这在 Redux-Form: Field docs 上没有记录：/

Style Redux Form 'Field' 标签

Style Redux Form 'Field' label

css

reactjs

material-ui

redux-form