株式会社スマレジの開発部でスマレジのサーバサイドを作っています

electron+react+gas+spreadsheetでgoogle calender用のスケジューラーを作る(4.5: react-datepickerの設定)

こんにちは! 株式会社スマレジ、開発部のmasaです。

すっかり春めいてきましたね。 masaは日頃の運動不足の解消に先日の休みに心斎橋の自宅から北浜経由で京橋まで歩いたりしていました笑(暇人)

ちなみに北浜はmasaがよく行くBrooklyn Roasting Companyの北浜店があります。 難波店に比べて店舗が小さいので、土日は結構混雑するんですが平日お休みの日なんかは、 そこで作業してたりすることがあります。

北浜店のリンクは↓ brooklynroasting.jp

作業するならお店が広い難波店がおすすめです。(こっちはぐるナビに登録されていたのでぐるナビリンク)

r.gnavi.co.jp

お近くにお住まいの皆様はぜひエスプレッソをお試しくださいませ。

今日は自分向けのメモです。

react-datepickerを入れたけど、CSSが効いていない?

reactdatepicker.com

Redmineチケットの開始日・終了日を入れるインターフェースを今作っており、そこでreact-datepickerを入れてみたのですが、 スタイルが効かず。。。

ググってみるとStack Over Flowに同じ現象の質問が。

stackoverflow.com

質問者さんのなっているように、スタイルが当たっていない状態になっていました。

解決策

解決策も↑のStack Over Flowに書いてあるんですが、cssを別でインポートしてあげないといけないようです。 ちょうどCDN用のlinkタグがあったので使用しているバージョン(4.10.0)にURLを変更してCSSをダウンロードしました。 (minify前と後両方ありました。)

 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/4.10.0/react-datepicker.min.css" />

React側のビルド設定の変更でも対応できるっぽいのですが、カレンダーのスタイルを変更したくなることもあると思うので、 今回は上記の対応にしました。