muiコンポーネントのuiをどうしても破壊したい時の備忘録

はじめに

このDatePickerコンポーネントは日付をカレンダーで入力できるmuiコンポーネントです。
文字部分をクリックすると手入力、カレンダーアイコンをクリックするとカレンダー入力ができます。
ですが、今回実装にあたって以下の変更を加える必要がありました。

• カレンダーアイコンはいらない
• どこをクリックしてもカレンダーモーダルが表示されるようにしたい

ですが、そのような変更オプションはDatePickerのAPIに含まれておらず、割と変わったアプローチをしたので記事にしました。

【コード】

<DesktopDatePicker />

変更箇所を見てみる

検証ツールで変更したい箇所を探します。
アイコン箇所を見ると、class名が「MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root」となっています。
このタグの親がMuiIconButton-rootとなっているので、おそらくカレンダーアイコンはこのような構成になっていると思われます。

<IconButton onClick={カレンダーモーダル開閉}>
    <SvgIcon>
        <svg カレンダーアイコン>
    </SvgIcon>
</IconButton>

そのため、SvgIconを非表示にし、IconButtonの範囲を全体にする方針にします。

変更した結果

cssで子要素を選択したい時は&を先頭につけます。
使ったことはなかったのですが、今回のような一つのタグで複雑なコンポーネントを実装しているmuiをいじるにあたって必要だったので調べました。
https://developer.mozilla.org/ja/docs/Web/CSS/Nesting_selector

変更後の挙動とコードはこちらです。

<DesktopDatePicker
          sx={{
            "& .MuiIconButton-root": {
              borderRadius: "4px",
              width: "100%",
              height: "100%",
              position: "absolute",
              top: "0",
              left: "0",
            },
            "& .MuiSvgIcon-root": {
              display: "none",
            },
          }}
/>

割と強引にしてしまった感じはあるのですが、そもそもapiに含まれてないuiの変更をするという状況が状況なので仕方ないかなと思いました。
滅多にないですけど、もしmuiのアップデートでクラス名が変わってしまうとレイアウトが元に戻ってしまうので。

他にもいい方法あればコメントお願いします🙇