如何修改<TextField>的label样式，解决日历弹出时标签遮挡问题？

我通过自定义的DatePicker.js组件两次渲染<TextField>，用户点击<TextField>内置的<CalendarIcon>时会弹出小型日历，我需要对<TextField>的label进行特定样式调整。当前效果如下：

可以看到第二个<TextField>的“To”标签在日历弹出时仍然可见，该标签应处于日历下层，不应该展示出来。

原始代码 #

class DatePickerInput extends React.Component {
  render() {
    const {
      classes,
      label,
      selectedDate
    } = this.props;
    return (<TextField
        fullWidth
        variant="filled"
        label={label}
        onClick={this.props.onClick}
        value={selectedDate.format("MM-DD-YYYY")}
        InputLabelProps={{
          shrink: true
        }}
        InputProps={{
          className: classes.input,
          endAdornment: (<CalendarIcon color="primary" />)
        }}
      />)
  }
}
class DatePicker extends React.Component {

  render() {
    const {
      label,
      value,
      minDate,
      maxDate,
      onChange
    } = this.props;


    return (
      <ReactDatePicker
        selected={value.toDate()}
        minDate={minDate.toDate()}
        maxDate={maxDate.toDate()}
        customInput={<DatePickerInputComp
          selectedDate={value}
          label={label}
        />}
        onChange={onChange} />
    )
  }
}

核心疑问 #

我该如何实现日历弹出时“To”标签不展示？我想为TextField的label属性设置样式，但不清楚具体实现方式。

已尝试的修改代码 #

const inputStyles = theme => ({
  icon: {
     zIndex: 1029,
   },
});
class DatePicker extends React.Component {

  render() {
    const {
      label,
      value,
      minDate,
      maxDate,
      onChange,
    } = this.props;
    const { classes } = this.props;


    return (
      <ReactDatePicker
        selected={value.toDate()}
        minDate={minDate.toDate()}
        maxDate={maxDate.toDate()}
        customInput={<DatePickerInputComp
          selectedDate={value}
          label={label}
        />}
        wrapperClassName={classes.icon}
        onChange={onChange} />
    )
  }
}

你的问题本质是层级堆叠优先级（z-index）冲突：Material UI filled 变体的 <TextField> 标签默认z-index为1，而ReactDatePicker的弹出日历默认z-index低于这个值，才会出现标签浮在日历上层的问题。你之前给外层wrapper加z-index的操作无法生效，需要调整弹出层或者标签的层级优先级，两种可行方案如下：

方案1：调整日历弹出层的z-index（推荐，无需额外状态管理） #

直接给ReactDatePicker的弹出层（popper）设置更高的z-index，只要大于1即可覆盖标签层级：

1. 修改样式定义：

const inputStyles = theme => ({
  datePickerPopper: {
     zIndex: 10, // 数值只要大于MUI TextField label的默认值1即可
   },
});

2. 给<ReactDatePicker>组件添加popperClassName属性关联样式即可：

<ReactDatePicker
  selected={value.toDate()}
  minDate={minDate.toDate()}
  maxDate={maxDate.toDate()}
  customInput={<DatePickerInputComp
    selectedDate={value}
    label={label}
  />}
  popperClassName={classes.datePickerPopper} // 新增这一行
  onChange={onChange}
/>

方案2：动态控制TextField标签的层级/显隐 #

如果需要针对标签做更灵活的样式调整，可以通过监听日历的开关状态，动态修改标签的样式：

1. 在DatePicker组件内新增状态管理日历的开启/关闭状态：

class DatePicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isCalendarOpen: false
    }
  }
  // 省略其他逻辑
}

2. 给<ReactDatePicker>添加开关监听事件，同时把状态传递给自定义输入组件：

<ReactDatePicker
  selected={value.toDate()}
  minDate={minDate.toDate()}
  maxDate={maxDate.toDate()}
  customInput={<DatePickerInputComp
    selectedDate={value}
    label={label}
    isCalendarOpen={this.state.isCalendarOpen} // 传递状态
  />}
  onOpen={() => this.setState({isCalendarOpen: true})} // 监听开启
  onClose={() => this.setState({isCalendarOpen: false})} // 监听关闭
  onChange={onChange}
/>

3. 在<DatePickerInput>组件内，通过传入的状态动态调整标签样式：

<TextField
  fullWidth
  variant="filled"
  label={label}
  onClick={this.props.onClick}
  value={selectedDate.format("MM-DD-YYYY")}
  InputLabelProps={{
    shrink: true,
    style: {
      // 日历开启时降低标签层级，也可以直接设置display: 'none'完全隐藏
      zIndex: this.props.isCalendarOpen ? 0 : 1
    }
  }}
  InputProps={{
    className: classes.input,
    endAdornment: (<CalendarIcon color="primary" />)
  }}
/>

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