有没有办法让我的 React Date Picker 直接在 MUI TextField 下方居中

Question

我在使用 React 日期选择器时遇到了一些样式问题：

• 我需要日期选择器在 MUI TextField 正下方居中
• 我需要指向文本字段的箭头图标与标题颜色相同

  theme.palette.primary.main

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    fontFamily: theme.typography.fontFamily,
    "& label": {
      transform: "translate(14px, 12px) scale(1)",
      color: theme.palette.text.secondary,
      "&.Mui-focused": {
        color: theme.palette.primary.main,
      },
    },
    "& .react-datepicker": {
      
    },
    "& .react-datepicker__header": {
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.common.white,
      "& button": {
        color: theme.palette.common.white,
      },
    },
    "& .react-datepicker__month-text:hover": {
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.secondary.contrastText,
      cursor: "pointer",
    },
    "& .react-datepicker__year-read-view--down-arrow, \
          & .react-datepicker__month-read-view--down-arrow,\
          & .react-datepicker__month-year-read-view--down-arrow,\
          & .react-datepicker__navigation-icon::before": {
      borderColor: theme.palette.common.white,
    },
    "& .react-datepicker__input-container": {
      display: "block",
    },
    "& .react-datepicker__input-container > input": {
      display:"none",
      width: "80%",
      padding: theme.spacing(1),
      border: `1px solid ${theme.palette.divider}`,
      borderRadius: theme.shape.borderRadius,
      outline: "none",
      fontSize: theme.typography.fontSize,
      fontFamily: theme.typography.fontFamily,
    },
    "& .react-datepicker__input-container > input:focus": {
      borderColor: theme.palette.primary.main,
    },
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        borderColor: theme.palette.divider,
      },
      "&:hover fieldset": {
        borderColor: theme.palette.divider,
      },
      "&.Mui-focused fieldset": {
        borderColor: theme.palette.primary.main,
        borderWidth: 2,
      },
    },
  },
}));

export default function MonthYearPicker(props) {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <TextField
        id={`date-picker-${name}`}
        label={label}
        variant="outlined"
        type="text"
        value={date.toLocaleString("default", {
          month: "long",
          year: "numeric",
        })}
        style={{
          background: 'white',
          display: 'flex',
          flexFlow: 'column',
          justifyContent: 'center',
          textAlign: 'center',
        }}
      />
      <DatePicker
        selected={date}
        onChange={handleChange}
        dateFormat="MM/yyyy"
        showMonthYearPicker
        ref={datePickerRef} // attach ref to DatePicker
      />
    </div>
  );
}

我尝试将父级的位置更改为相对的位置，将日期选择器的位置更改为绝对的，然后将 x 转换为 -50 但是这不起作用......我并不完全熟悉 React Date Picker 并且我只使用这是因为 MUI 的月年选择器不能按我的版本预期的那样工作。提前谢谢你！