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としてあげることで枠線を消すことができます。

おわりに

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