如何为Redux Form的Field组件标签设置自定义样式？

我之前也碰到过一模一样的情况，Redux Form的Field确实不会自动把className传递给内部的标签组件，不过结合你用的redux-form-material-ui的TextField，有几个靠谱的解决办法：

方法1：通过TextField的InputLabelProps传递标签类名 #

因为redux-form-material-ui的TextField本质是封装了Material-UI的TextField组件，而Material-UI允许通过InputLabelProps把自定义类名直接传给内部的标签元素。代码可以这么写：

import { Field } from 'redux-form';
import TextField from 'redux-form-material-ui/lib/TextField';
// 假设你用的是Material-UI的makeStyles定义样式
const useStyles = makeStyles({
  formField: {
    // 字段本身的样式
  },
  formLabel: {
    color: '#2c3e50',
    fontSize: '14px',
    fontWeight: 500,
    // 这里写你需要的标签样式
  }
});

// 在组件里使用
const MyForm = () => {
  const classes = useStyles();
  return (
    <Field
      className={classes.formField}
      component={TextField}
      label={'你的标签文本'}
      InputLabelProps={{ className: classes.formLabel }}
    />
  );
};

这个方法最直接，能精准控制标签的样式，不会影响其他元素。

方法2：强制标签继承父元素样式 #

如果你的需求是让标签继承父组件的样式，可以在标签的类里用CSS的inherit关键字，同时加上!important来覆盖Material-UI默认的内联样式优先级：

.formLabel {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  /* 其他需要继承的样式属性 */
}

然后同样通过InputLabelProps把这个类传给标签就行。

方法3：用CSS嵌套选择器直接选中标签 #

如果你用的是CSS-in-JS方案（比如makeStyles、styled-components），可以直接在formField类里嵌套标签的选择器，不用额外传props：

const useStyles = makeStyles({
  formField: {
    // 字段本身的样式
    '& label': {
      color: '#34495e',
      fontSize: '14px',
      // 直接设置标签样式
    }
  }
});

// 使用的时候还是正常传className给Field
<Field
  className={classes.formField}
  component={TextField}
  label={'你的标签文本'}
/>

原理是Field渲染后的DOM结构里，标签是formField类容器的子元素，所以通过& label就能选中它，非常方便。

简单总结下：Redux Form的Field的className只作用于它渲染的根组件（也就是TextField的外层容器），所以要控制内部标签的样式，要么通过Material-UI的props传递类名，要么用CSS选择器直接定位标签～

内容的提问来源于stack exchange，提问作者slotdp02