检查my example here，我已经尝试按照您的描述制作
基本上我所做的是使用这个css代码：

.react-datepicker__month-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.react-datepicker__month-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.react-datepicker__month {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1; /* Use flex instead of flex-basis */
  box-sizing: border-box;
  padding: 0 2px; /* Add padding to avoid months sticking together */
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  text-align: center;
  padding: 0.6rem 0;
  font-size: 14px;
}

执行以下操作：

1.在react-datepicker__month上使用flex-wrap: wrap，使其换行。
1.从react-datepicker__month-wrapper中删除flex-direction: column;。
1.使用showThreeColumnMonthYearPicker

1.

.react-datepicker__month {
  // margin: 4rem;
  text-align: center;
  display: flex;
  flex-direction: row;
  margin: auto;
  padding-top: 10px;
  flex-wrap: wrap; /* NEW */
}

2.

.react-datepicker__month-wrapper {
  display: flex;
  /* flex-direction: column; */ /* NEW */
}

3.

export default function App() {
  const ref = useRef();
  return (
    <div className="App">
      <DatePicker
        ref={ref}
        showMonthYearPicker
        showThreeColumnMonthYearPicker /* NEW */
        minViewMode="months"
        dateFormat="MMM-yyyy"
        excludeDates={[
          1661990400000, 1664582400000, 1667260800000, 1672531200000,
        ]}
        onChange={(e) => {}}
      />
    </div>
  );
}

试试这个：

import "./styles.css";
import "./flatpicker.css";
import DatePicker from "react-datepicker";
import React, { useEffect, useState } from "react";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <div className="App">
      <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      dateFormat="MM/yyyy"
      showMonthYearPicker
      />
    </div>
  );
}

对于你的CSS试试这个：从.react-datepicker__month-wrapper元素中删除display:column并将其添加到.react-datepicker__month
更多信息：链接

有一个div，它每4个月 Package 一次，包含一个名为.react-datepicker__month-wrapper的类。
访视CODESANDBOX
上面的布局可以很容易地通过改变代码，像这样
将showFourColumnMonthYearPicker更改为showThreeColumnMonthYearPicker

最后代码应如下所示

<DatePicker
        ref={ref}
        showMonthYearPicker
        showThreeColumnMonthYearPicker  // <= change this line
        minViewMode="months"
        dateFormat="MMM-yyyy"
        onChange={(e) => {}}
      />

.react-datepicker__month-container {
  float: left;
  display: flex;
  flex-direction: column;
}

.react-datepicker__month-wrapper{
   display: grid;
  grid-auto-flow: column dense;
}

.react-datepicker__month {
  text-align: center;
  margin:auto;
  padding-top: 10px;
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  text-align: left;
  padding:0.6rem 2.4rem;
  font-size: 14px;
}