初めに

今回は、フロントエンドのライブラリを使っていて、そのライブラリのCSSがどうしても変更できない場合に有効な方法として「CSSのオーバーライド」について解説します。自分も初めて知った方法なので、備忘録としてここに残しておきます。

現状

今回はLeafletを使って実装していたときに、地図のボタンのUIが変更できないという問題が発生しました。Leafletのデフォルトボタンは以下のようなデザインです。

このボタンの位置を固定（position: fixed）にしたかったのですが、調べても解決策が見つからなかったため、CSSのオーバーライドを使って対応しました。ただし、Tailwind CSSで統一して開発している場合、この方法は通常のCSSを記述する必要があり、Tailwind CSSの統一性が損なわれるので注意が必要です。

以下に、具体的な手順を示します。

手順

まず、ブラウザを開き、開発者ツールを表示します（command + option + J で開けます）。
次に、変更したいボタンをクリックします。すると、以下の画像のように、Elementsタブでそのボタンに適用されているCSSクラスが確認できます。今回は leaflet-control-zoom クラスが該当しています。

global.css ファイルを開きます（今回はNext.jsを使用しているため、このファイルに追記しています）。以下のように、該当のクラスに対して!importantをつけてスタイルを記述することで、CSSの上書きが可能です。

これでCSSのオーバーライドによって、Leafletのボタンのスタイルを上書きすることができました。

終わりに

CSSのオーバーライドは、あまり推奨される方法ではありませんが、
やむを得ない場合の最終手段として覚えておくと便利です。ここまで読んでいただき、ありがとうございました。