React Date Picker样式调整求助：居中及箭头颜色设置

1. 让日期选择器居中显示在TextField正下方 #

React Date Picker默认将弹窗挂载到body元素下，父元素的相对定位无法生效，可通过以下两种方式调整：

方式一：用popperModifiers计算定位 #

修改DatePicker组件的props，添加定位修饰符实现居中：

<DatePicker
  selected={date}
  onChange={handleChange}
  dateFormat="MM/yyyy"
  showMonthYearPicker
  ref={datePickerRef}
  popperModifiers={{
    offset: {
      enabled: true,
      offset: "0, 10px" // 调整与TextField的间距
    },
    placement: "bottom-start",
    computeStyle: {
      fn: (data) => {
        const textField = document.getElementById(`date-picker-${name}`);
        if (textField) {
          const textFieldWidth = textField.offsetWidth;
          const pickerWidth = data.styles.width || 0;
          data.styles.left = `${(textFieldWidth - pickerWidth) / 2}px`;
        }
        return { ...data.styles };
      }
    }
  }}
/>

方式二：将弹窗挂载到父容器内 #

1. 给父容器添加相对定位：

const useStyles = makeStyles((theme) => ({
  root: {
    // 原有样式...
    position: "relative",
  },
  // 其他样式...
}));

2. 修改DatePicker组件，指定挂载容器并调整定位：

<DatePicker
  selected={date}
  onChange={handleChange}
  dateFormat="MM/yyyy"
  showMonthYearPicker
  ref={datePickerRef}
  portalId={classes.root}
  popperProps={{ positionFixed: false }}
  popperModifiers={{
    offset: { enabled: true, offset: "0, 10px" },
    placement: "bottom",
    computeStyle: {
      fn: (data) => {
        data.styles.left = "50%";
        data.styles.transform = "translateX(-50%)";
        return { ...data.styles };
      }
    }
  }}
/>

2. 修改指向文本框的箭头图标颜色 #

在useStyles的root类中添加箭头样式，将颜色设为theme.palette.primary.main：

const useStyles = makeStyles((theme) => ({
  root: {
    // 原有样式...
    "& .react-datepicker__triangle": {
      "&::before": {
        borderBottomColor: theme.palette.primary.main, // 箭头边框颜色
      },
      "&::after": {
        borderBottomColor: "#fff", // 箭头内部填充色，与弹窗背景匹配
      }
    }
  },
  // 其他样式...
}));

注：代码中TextField的id={date-picker-${name}}需确保name变量已在组件中定义，避免报错。

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