javascript - 如何更改 中 Prop 的样式？

Question

我正在渲染 <TextField>两次使用我定义的 DatePicker.js成分。因此，每当用户点击 <CalendarIcon>在 <TextField> 里面，小日历将打开。我想为 <TextField> 中的标签设置样式以特定的方式。目前，这是它的样子。

您可以看到第二个 <TextField> 的“收件人”标签是可见的。它应该在日历后面，不应该出现。

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

问题:
如何在 <CalendarIcon> 时不显示“收件人”标签？弹出。我想为 TextField 的 Prop “标签”设置样式，但我不确定该怎么做。

更新后的代码:

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

Answer 1

您可以为 react-datepicker 组件添加更高的 z 索引，以使其在堆栈顶部可见。

 <ReactDatePicker
    selected={value.toDate()}
    minDate={minDate.toDate()}
    maxDate={maxDate.toDate()}
    customInput={<DatePickerInputComp
    selectedDate={value}
    label={label}
    wrapperClassName="datePicker"
  />

我添加了一个 wrapperClassname datePicker 以使样式更容易。

.datePicker{
 z-index: 999
}

暂时给定的z-index为999，您可以在为文本字段定义z-index后将其更改为较低的值。