【react】react-calendarの装飾をCalendar.cssを使ってカスタマイズする

githubでも紹介されていますが、基本的にはreact-calendarの

見た目をカスタマイズしたい場合は

node_modules内にある’react-calendar/dist/Calendar.css’を以下のようにして

インポートします。

import ‘react-calendar/dist/Calendar.css’;

完了したところでnode_modules/react-calendar/dist/Calendar.cssを編集→ビルド。

例：格子をつけたい場合。

.react-calendar button {
  margin: 0;
  border: 1px solid #a0a096;
  outline: none;
}

例：日にちをタップした時のタイルの色を変更したい場合

.react-calendar__tile--active {
  background: #006edc;
  border-radius: 50%;
  color: white;
}

で見た目が変わっていれば成功です。
必要最低限のコンポーネントは全て揃っているので、どれを変えればいいのか

わからないということはないはず、です。