現象

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

環境

この枠線自体何物なのか分からず、だいぶ調べた。
記事を見ると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をつけた。