how to remove border in textfield fieldset in material ui - css

Question

I need to remove the border. I used some css from stack overflow but the issue is not fixed yet . If any one please help me to fixed this issue .I shall be very thank full.
what css I write to remove the border.
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="phoneNumber"
disableUnderline={false}
// label="Phone Number"
name="phoneNumber"
autoComplete="phoneNumber"
autoFocus
onChange={handlePhoneNumberChange}
className={classes.textField}
placeholder="Phone Number"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>

Answer 1

I was looking for a borderless text-field and this is working for me...
<TextField
variant="standard" // <== changed this
margin="normal"
required
fullWidth
id="phoneNumber"
name="phoneNumber"
autoComplete="phoneNumber"
autoFocus
onChange={handlePhoneNumberChange}
placeholder="Phone Number"
InputProps={{
startAdornment: <AccountCircle />, // <== adjusted this
disableUnderline: true, // <== added this
}}
/>
These 2 props seem to be the key...
variant="standard"
InputProps={{
disableUnderline: true,
}}

Answer 2

InputProps can be passed to the style the variants of the inputs. For outlined input there a class named .MuiOutlinedInput-notchedOutline which sets the border in this question's case. To modify this class, pass the styles to the notchedOutline prop in InputProps.
const useStyles = makeStyles(() => ({
noBorder: {
border: "none",
},
}));
const TextInput = props => {
const { onChange, type} = props;
const classes = useStyles();
return (
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="phoneNumber"
disableUnderline={false}
// label="Phone Number"
name="phoneNumber"
autoComplete="phoneNumber"
autoFocus
classes={{notchedOutline:classes.input}}
// onChange={handlePhoneNumberChange}
className={classes.textField}
placeholder="Phone Number"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
classes:{notchedOutline:classes.noBorder}
}}
/>
);
};
Here is the working sandbox link: https://codesandbox.io/s/material-demo-forked-nhlde

Answer 3

to remove border in TextField fieldset in MUI 5,
simply add following.
sx={{
"& fieldset": { border: 'none' },
}}

Answer 4

I tried all the answers here.
Doesn't work
I found this InputBase
It works very nicely.
This is exactly what you should use.
They have provided the sandbox too
Sandbox InputBase

Answer 5

In your textField style add outline: 'none'

Answer 6

As at 2022, if your using MUI >= version 5, you can use some solutions here, and currently there's no where in the doc on how do this in Textfield.
Another nice component MUI provides is the Input, and luckily for us it accepts almost all props passed to Textfield, that's where you can do disableUnderline={false} and it will work as expected.
<Input
disableUnderline={true}
variant="standard"
autoFocus
onChange={yourChangeHandler}
value={value}
placeholder="Title"
fullWidth
/>

Answer 7

Finally, the following css works (2022)
'& .MuiInput-root': {
'&:before, :after, :hover:not(.Mui-disabled):before': {
borderBottom: 0,
},
},

Answer 8

For Outlined TextField
If you want to remove outlines from the outlined text field. Then add this in your TextField
sx={{border: 'none',"& fieldset": { border: 'none' },}}
Here is your code...
<TextField
variant="outlined"
sx={{border: 'none', "& fieldset": { border: 'none' },}}
margin="normal"
required
fullWidth
id="phoneNumber"
disableUnderline={false}
// label="Phone Number"
name="phoneNumber"
autoComplete="phoneNumber"
autoFocus
onChange={handlePhoneNumberChange}
className={classes.textField}
placeholder="Phone Number"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
/>
For Standard TextField
If you want to remove underline from the standard text field. Then add this in your TextField
InputProps={{ disableUnderline: true }}
Here is code
<TextField
fullWidth
placeholder="Search..."
InputProps={{ disableUnderline: true }}
/>

Answer 9

Added sx prop with below attributes in TextField and it worked fine for me
<TextField
sx={{
input: {
border: "none",
},
"::placeholder": { color: "white" },
}}
/>

Answer 10

The documentation doesn't offer any good way to do this
So you can select the Mui selector for that element and modify it directly
This worked for me.
You can override the css
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
sx={{ "& .MuiOutlinedInput-notchedOutline": { border: "none" } }}
/>
<TextField
id="filled-basic"
label="Filled"
variant="filled"
sx={{
"& .MuiFilledInput-underline:before": {
borderBottom: "none",
},
"& .MuiFilledInput-underline:after": {
borderBottom: "none",
},
"& .MuiFilledInput-underline:hover:not(.Mui-disabled):before": {
borderBottom: "none",
},
}}
/>
Please check it in codesandbox

Answer 11

Try to override style
See example below

Answer 12

disableUnderline
If true, the input will not have an underline.
<Input
variant="standard"
disableUnderline={true}
required
color="info"
fullWidth
margin="dense"
focused
/>
API

Answer 13

Just add
".MuiOutlinedInput-notchedOutline": { border: "none" },
to the sx prop.
This works both for MUI Select and Textfield

Answer 14

If you want to remove the border for all MuiOutlinedInput components, add this to your theme's components object:
export const theme = createTheme({
// ...
components: {
// ...
MuiOutlinedInput: {
styleOverrides: {
notchedOutline: {
border: 'none',
},
},
},
},
})