样式 Redux 表单“字段”标签答案

【问题标题】：Style Redux Form 'Field' label样式 Redux 表单“字段”标签
【发布时间】：2018-03-22 05:09:29
【问题描述】：

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

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

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

【解决方案1】：

将你自己的 <CustomLabel /> 组件添加到 label 属性中。

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

在 React 中，内联样式不指定为字符串。相反，他们用一个对象指定，该对象的键是驼峰式版本的样式名称，其值为样式的值，通常为字符串。

【讨论】：

【解决方案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 上没有记录：/

【讨论】：