React DatePicker显示异常，如何配置实现官网同款样式？

你的问题核心是没有导入react-datepicker官方提供的样式文件，官网组件的样式依赖它自带的CSS，不导入的话就会显示无样式的默认状态。

修改你的代码，添加样式导入即可：

import React, { useState } from "react";
import { observer } from "mobx-react-lite";
import DatePicker from "react-datepicker";
// 新增这行：导入官方样式
import "react-datepicker/dist/react-datepicker.css";
import { Row } from "react-bootstrap";

const Budget = observer(() => {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <Row>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        dateFormat="MM/yyyy"
        showMonthYearPicker
      />
    </Row>
  );
});

如果导入后还是和官网样式有差异，可能是react-bootstrap的样式和它产生了冲突，可以尝试给DatePicker添加自定义className，通过CSS调整样式优先级，比如：

<DatePicker
  // 其他属性不变
  className="custom-datepicker"
/>

然后在CSS里补充：

.custom-datepicker {
  /* 根据需要自定义样式覆盖冲突部分 */
}

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