如何从 MUI 文本字段中删除边框

Question

I have used Input field from Material UI. I want to remove the border from it. I have tried using border="none" but it didn't remove.

Screenshot

Answer 1

Change the variant prop to filled or standard

The more you can work with mui styling rather than override it with custom CSS, the happier you'll be long term.

Answer 2

<TextField 
   variant="standard"
   InputProps={{
     disableUnderline: "true"
   }}
/>

This will solve the issue. However, the built-in padding changes once you do this; use some css to set it according to your UI.