react-datepickerで表示されるカレンダーの見た目を変えたい

[react-datepicker](https://reactdatepicker.com/) で日付の範囲選択を実装するにあたって、
CSSやら結構いじったので、備忘録。
範囲指定じゃなければ、参考に載せている記事でこと足りるのですが、
範囲指定中（始まりの日を選んで終わりの日をまだ確定していない時）の色等、
変更したいとろがあったので、追加や使わないところは削除しています。

## 導入手順
```shell
npm install react-datepicker --save
npm install @types/react-datepicker
```

## デフォのカレンダー
![スクリーンショット 2023-04-06 8.50.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670801/9f8c3dcb-0ec9-ce74-f8b6-0c455f34a6fe.png)



## 完成形のカレンダー
![スクリーンショット 2023-04-06 8.42.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670801/c7172fd8-daef-e9d0-1250-aced1a089eb1.png)

## 実装

```react:DateRangePicker.tsx
...
// CSS
import "react-datepicker/dist/react-datepicker.css";
import "../../assets/styles/date-picker.css";
// 日本語化
import ja from "date-fns/locale/ja";
registerLocale("ja", ja);
...
retutn (
    <Datepicker
        selected={startDate}
        onChange={handleDatesChange}
        startDate={startDate}
        endDate={endDate}
        inline={inline}
        dateFormat="yyyy/MM/dd" // デフォだと「dd/MM/YYYY」なので
        locale="ja" // 上で設定した日本語化をここで設定
        minDate={MIN_DATE}
        maxDate={MAX_DATE}
        monthsShown={monthsShown}
        selectsRange
    />
)
```

```CSS:date-picker.css
.react-datepicker-wrapper,
.react-datepicker__input-container {
  display: block;
}

/* 曜日から上のヘッダー部分 */ 
.react-datepicker__header {
  background-color: #fff;
}

/* 曜日の下の線 */
.react-datepicker__header,
.react-datepicker__time-container {
  border-color: #fff;
}
 
/* 日付ホバー時 */
.react-datepicker__day:hover {
  background: #db4d6d;
  color: #fafafa;
}

 /* 曜日 */ 
.react-datepicker__day-name {
  color: rgba(0, 0, 0, 0.54);
}

/* 今日の日付 */
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #fff; /* デフォだと今日の日付に色がつくので白に上書き */
}

/* 選択された日付 */
.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--selected {
  background: #e87a90;
  font-weight: normal;
  color: #fafafa;
}

/* 選択中の日付 */ 
.react-datepicker__day--in-selecting-range:not(
    .react-datepicker__day--in-range,
    .react-datepicker__month-text--in-range,
    .react-datepicker__quarter-text--in-range,
    .react-datepicker__year-text--in-range
  ),
.react-datepicker__month-text--in-selecting-range:not(
    .react-datepicker__day--in-range,
    .react-datepicker__month-text--in-range,
    .react-datepicker__quarter-text--in-range,
    .react-datepicker__year-text--in-range
  ),
.react-datepicker__quarter-text--in-selecting-range:not(
    .react-datepicker__day--in-range,
    .react-datepicker__month-text--in-range,
    .react-datepicker__quarter-text--in-range,
    .react-datepicker__year-text--in-range
  ),
.react-datepicker__year-text--in-selecting-range:not(
    .react-datepicker__day--in-range,
    .react-datepicker__month-text--in-range,
    .react-datepicker__quarter-text--in-range,
    .react-datepicker__year-text--in-range
  ) {
  background-color: #f596aa;
}

```

## 参考
https://reactdatepicker.com/

https://qiita.com/reona396/items/8d205d49947b49f54ed5