Remove border around material-ui v4 textbox-CodePudding

I am using Material-UI version 4 and not the latest mui v5.

I have tried the following to no avail. I just want to remove/hide the border around the textfield component.

<TextField
  disabled={true}
  variant="standard"
  InputProps={{ 
    style: { backgroundColor: '#d6eaf8', fontSize: '18px', color: 'black' },
             underline: {
                "&&&:before": {
                      borderBottom: "none"
                },
                "&&:after": {
                      borderBottom: "none"
                }
             }                          
           }}                   
 />

CodePudding user response：

If you only want to remove the material ui underline border you simply use the "disableUnderline: 'true'" property like this:

<TextField
 disabled={true}
 variant="standard"
 InputProps={{
   disableUnderline: 'true',
   style: {
     backgroundColor: "#d6eaf8",
     fontSize: "18px",
     color: "black"
   }
 }}
/>

If you want to have all the TextInputs look the same I would recommend setting up a custom Theme, though.

updated:

Another way of removing the border is to fiddle around with the CSS Global classes such as:

  const StyledTextField = withStyles({
    root: {
      "& .MuiOutlinedInput-root": {
        backgroundColor: "lightblue",
        "& fieldset": {
          border: "none"
        }
      }
    }
  })(TextField);

  return <StyledTextField variant="outlined" />;

updated 2:

or if you rather use a custom theme:

const theme = createTheme({});
theme.overrides = {
    MuiOutlinedInput: {
      root: {
        backgroundColor: 'lightblue',
      },
      notchedOutline: {
        border: "none"
      }
    }
  };

...

<ThemeProvider theme={theme}>
   <TextField variant="outlined" />
</ThemeProvider>