Question

我需要在Redux表单字段的标签上应用一些样式。 Redux Form API没有提到任何标记样式的方法。 <li> <div class="xx"> <div class="aa">A</div> <div class="bb">B</div> </div> <div class="cc">C</div> </li>类应用于字段本身，但不应用于标签。

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

classes.formField

Answer 1

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

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

可悲的是，这在Redux-Form: Field docs：/

上没有记载

Answer 2

将您自己的<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>
}

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

样式Redux表单'Field'标签

2 个答案: