概要

react-datepickerのポップアップに対してz-indexを指定する場合、React DatePicker calendar showing behind table headの記事にある通り、規定のクラス名を指定してスタイルを上書くという実装は対応として挙げられます。
とはいえ、私の開発してる環境ではtailwindを使用してるので、可能であればクラス名を指定してスタイルを適用させたいです。しかしclassNameに指定してもスタイルが効かなかったので、どうすればよいかというメモ書きです。

前提

使用したreact-datepickerのバージョンは8.0.0です。

対応

datepicker (component)のドキュメントに記載がある、popperClassNameを使用します。
tailwindを使用して、z-indexを指定する場合の実装は以下の通りとなります、規定のz-index設定に負けてしまわないうようimportantを付与しています。

<DatePicker
  selected={value}
  onChange={(date) => setValue(date)}
  dateFormat="yyyy/MM/dd"
  popperPlacement="bottom-start"
  popperClassName="!z-20" // ここにtailwindのクラス名を指定
/>