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"
                }
             }                          
           }}                   
 />
cssreactjsmaterial-ui

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

simultaneous image hover effect for all images

I am experiencing an issue with my CSS and Bootstrap hover effect. The overlay tags are enclosed within a div class, but they all hover simultaneously. Each overlay belongs to a different Bootstrap grid, yet the effect extends even to the empty spaces betw ...

htmlcsstwitter-bootstrap

The nested navigation link disappears suddenly on Internet Explorer 9

This query closely resembles another issue: Nested menu keeps vanishing on IE 8 & 9. However, the solution provided is quite limited. Why do my nested menus disappear before I can reach them with my cursor unless I move it swiftly? This peculiar behavi ...

cssinternet-explorer-9nav

Struggles with arranging HTML header components

I've been attempting to insert a Twitter logo into the header of my website (which is styled using Bootstrap CSS), but unfortunately, it's causing some alignment issues. My initial goal was to position them next to each other, however, they ended ...

csshtmltwitter-bootstrapalignment

Error with HTML form validation

After clicking the "Send Request" button, the query string ?req_flag=0 is not appearing in the URL. What could be causing this issue? I want my URL to look like this: localhost/flavourr/send_req.php?req_flag=0&f_e_mail_add=value <pre> <form ...

phphtmlcssxhtmltextarea

Unexpected TypeError thrown by a simple react-cube-navigation demonstration

Looking to utilize the react-cube-navigation component, available here. Encountering a TypeError when attempting to run the provided example, React throws an error: TypeError: props.rotateY.to(function (x) { return "scale is not a function. ( ...

javascriptreactjsnpm

The React Native application continuously crashes following the installation of react-native-gesture-handler

I recently embarked on building an app using React Native 0.60. The initial build worked smoothly, but after installing and setting up react-native-gesture-handler, my app started crashing in the emulator. There were no error messages, it just kept crashin ...

androidreactjsreact-native

Does the Width Toggle Animation fail to function in FireFox when using jQuery?

Has anyone else encountered this issue with the jQuery animate function not working in Firefox but working fine in IE8, Opera, and Chrome? I'm experiencing this problem and wondering if there's a workaround to make it work in Firefox as well. ht ...

javascriptjqueryhtmlcssfirefox

Retrieve the item located directly behind a React component

Is there a way to access the JavaScript object that represents a React element? Let's take an example: const Test = ()=> { return ( <div> Hello world</div> ) } When we use <Test />, behind the scenes, what actually happe ...

reactjs

Creating a custom design for ng-bootstrap accordion using CSS styling

I've encountered an issue with my Angular 2 component that utilizes an accordion from ng-bootstrap. While the functionality works perfectly, I'm facing a problem with applying custom styles using the .card, .card-header, and .card-block classes o ...

cssangularng-bootstrap

Having Trouble Accessing Custom Screen in React Navigation?

The navigation from the Order screen to the Home Screen is not working as expected. Every screen in the route works, except for the Home screen, which just navigates back to the Map screen. I have clearly instructed to navigate to Home. Here is the curren ...

javascriptreactjsreact-nativereact-reduxreact-navigation

CSS Sprite Animation Technique

Hello there, I've been attempting to create a simple animation using CSS and a sprite but for some reason it's not working. Can anyone help me figure out what I'm missing? I have created a sample on JS Fiddle. Could someone please explain w ...

htmlcssanimationsprite

The Vue.js modal is unable to resize below the width of its containing element

My challenge is to implement the Vue.js modal example in a larger size. I adjusted the "modal-container" class to be 500px wide, with 30px padding and a max-width of 80%. However, I'm facing an issue where the "modal-mask" class, containing the contai ...

javascriptcssvue.js

What could be causing an issue with exporting the ListItem component in Material-UI?

Here is an example where I am attempting to export the ListItem component from Material-UI. import ListItem, { ListItemProps } from '@material-ui/core/ListItem'; export const MyListItem = (props: ListItemProps) => ( <ListItem {...prop ...

reactjsmaterial-ui

Using CSS3 to target the final <li> element within the main list in a nested <ul> structure

I have a complex list structure: <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li> <ul> <li>Nested Item</li> <li>Nested Item</li> <li>L ...

csscss-selectors

The background color is showing the wrong shade

So, I recently created a simple HTML5 website and decided to set the background-color of the header div to #3D7D99. However, when I view it in the browser, it appears as #35728E. Can anyone explain what might be causing this discrepancy? UPDATE: Just to c ...

htmlcssbackground-color

Sending Twilio SMS Data from Node to React can be achieved by passing the post data

Currently utilizing Twilio for receiving SMS messages on my server, I am seeking a way to display the returned data in React. As Twilio sends data only server-side via a POST request when a text is sent from my phone, how can I access this POST data in m ...

javascriptnode.jsreactjsexpresstwilio

Steps to halt the npm serve command

I have created React Apps: npm run build and globally installed serve package: npm install -g serve and executed it: serve -s build How can I stop it? I attempted serve help but cannot find a stop option Options: -a, --auth Serve behind bas ...

reactjsnpmserve

Switching the position of a Button in Semantic UI React: Moving it from the Left to the

I need assistance with adjusting the position of a Semantic UI React Button. By default, the button is displayed on the left side, but I would like it to be on the right side instead. Can someone please provide guidance on how I can move the Semantic butto ...

javascriptreactjssemantic-ui-react

React is struggling to locate the specified module

Once I've set up my react project using npx create-react-app called my-app, I proceed to run npm start only to encounter the error shown in the image below. Running node version: 12.16.1 with npm version: 6.13.4 View the error message her ...

javascriptjqueryreactjstypescriptreact-native

Exploring Next.js 13: Automating Redirects Following Image Creation

In my current project using Next.js 13, I've managed to create a feature where users can generate images based on their input. The image generation is handled by a function called generateImage, which successfully generates and stores the image in the ...

reactjsnext.jsopenapireact-server-components