Getting rid of the border on a material-ui v4 textbox

Question

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5.

I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or 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"
                }
             }                          
           }}                   
 />

css reactjs material-ui

Answer 1

Answer №1

To remove the underline border from material ui, simply add the property "disableUnderline: 'true'" like this:

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

If you want all TextInputs to have a consistent look, consider setting up a custom Theme.

updated:

An alternative method to remove the border is by adjusting CSS Global classes as follows:

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

  return <StyledTextField variant="outlined" />;

updated 2:

If you prefer using a custom theme, you can do it like this:

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

...

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

Answer 2

To remove the underline border from material ui, simply add the property "disableUnderline: 'true'" like this:

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

If you want all TextInputs to have a consistent look, consider setting up a custom Theme.

updated:

An alternative method to remove the border is by adjusting CSS Global classes as follows:

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

  return <StyledTextField variant="outlined" />;

updated 2:

If you prefer using a custom theme, you can do it like this:

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

...

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

Getting rid of the border on a material-ui v4 textbox

Answer №1

Similar questions

using flexbox in react does not automatically resize

Tips for resizing the width automatically within a container?

Creating a sleek horizontal scrolling list with the least amount of rows using tailwindcss

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

Troubleshooting homepage issues post react-scripts update for create react app

Arranging items by their total sum of arrays in React.js

align items center with respect to my central element

Ensure that the div is styled with a white background and positioned next to another div with a right margin

An error occurred due to an unexpected identifier, '_classCallCheck', while the import call was expecting exactly one

A guide on displaying multiple XML files within a JHipster React Application

Encountering a 404 error with Symfony and React Router integration

Changing the style of Vuetify v-list-item when hovering over it

Having issues changing image types with onError in react functionality

Navbar optimization by eliminating unnecessary whitespace at the end

"Implementing a dynamic way to assign values to different item types in React

:after functionality not operating properly in Internet Explorer

Adding HTML components to an image with adjustable dimensions

Tips for avoiding anti-aliasing of bitmap font on Internet Explorer and Firefox

Are there any techniques for enabling horizontal scrolling on the MaterialTable to handle overflow?

Exploring the wonders of Next.js and its ability to incorporate