MUIのTextFieldでfocusされた際に線が二重になってしまう

現象

MUIのTextFieldをフォーカスした際、二重にボーダーが表示されてしまい不格好になってしまう。

環境

• Laravel10 + Inertia + Vite + React + TypeScript
• Tailwind
• Material-UI

原因

この枠線自体何物なのか分からず、だいぶ調べた。
記事を見るとoutline:noneを指定してあげると良いみたいな記事が多く、適用してもうまく行かない。

×失敗例

app.scss

input:focus,textarea:focus{
    outline: none;
}

開発者ツールでよく調べていると、他のスタイルにoutline: 0;が存在するのでこれではなさそうだった...

○成功例

app.scss

input:focus,textarea:focus{
    box-shadow: none !important;
}

この枠線の正体はbox-shadowだった。
筆者の環境ではTailwindの優先順位が高く上書きされてしまっていたので、box-shadow自体無くても困りそうにないので!importantをつけた。