MUIのTextFieldで枠線（fieldset）を消す方法。

はじめに

MUIのTextFieldを使用すると、Borderが適用されて、このBorderを無効化したい場合があります。
例えば、TextFieldをrenderInput内で使用して、スタイルはラッパー側を適用したい場面など。

そういったときに、枠線を消す方法を備忘録として記します。

環境

• mui/material: 5.15.5

枠線を消す方法

<TextField
  variant="outlined"
  sx={{
    'fieldset': {
      border: 'none'
    }
  }}
/>

TextField内の、fieldsetという要素のスタイルにborderが適用されていました。
そのため、TextField内でfieldsetに対して、borderをnoneとしてあげることで枠線を消すことができます。
今回は、variant="outlined"のときに適用されます。

おわりに

個人的には、global.cssなどに適用させずに、
コンポーネントで完結するようにしたかったのでよかったです。