MUIのSelectコンポーネントで青色の枠線を消す方法

はじめに

今回は、MUIのSelectコンポーネントで青色の枠線を消す方法を紹介します。

消すために割と時間を使ってしまったので、被害者がこれ以上出ないように...

解決法

sxに以下の記述をする

<Select
  sx={{
    // 青い枠線を消す
    '& > fieldset': {
      border: 'none !important',
    },
  }}
/>

fieldsetで制御されていることに気づくのが時間かかりました...

ちなみに

fieldsetというのは、labelタグのようにフォームを管理するタグだそうです。

labelと違う点は、複数フォームの管理に使われることです。

<form>
  <fieldset>
    <legend>好きな猫を選んでください🐈</legend>

    <input type="radio" id="kraken" name="cats" value="S" />
    <label for="Scottish Fold">スコティッシュフォールド</label><br />

    <input type="radio" id="sasquatch" name="cats" value="A" />
    <label for="american shorthair">アメリカンショートヘア</label><br />

    <input type="radio" id="mothman" name="cats" value="M" />
    <label for="munchkin">マンチカン</label>
  </fieldset>
</form>

MUIのSelectは、このタグを利用してフォームの管理をしているということですね！

参考