How to Remove the Underline of Textfield from Material-Ui

How can I remove the underline of TextField from Material-UI?

Even though this is currently the accepted answer, please see the other answer instead (using the disableUnderline prop). I wrote this answer after having recently written an answer about how to customize the underline (which uses approaches similar to this answer) and missed that there was a property specifically for removing the underline.

---

Below is an example of how to remove the underline. :before is used for the default and hover styling and :after is used for the focused styling, so the border needs to be removed for both of those cases.

The multiple ampersands (e.g. "&&&:before") increase the CSS specificity of the rule so that it wins over the default styling (e.g. &:hover:not($disabled):before).

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  underline: {
    "&&&:before": {
      borderBottom: "none"
    },
    "&&:after": {
      borderBottom: "none"
    }
  }
});
function App() {
  const classes = useStyles();
  return <TextField defaultValue="default text" InputProps={{ classes }} />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related answer: How do I custom style the underline of Material-UI without using theme?

How can I disable underline in Material-UI without removing the selection in Autocomplete?

To enable the dropdown list again, you need to spread all provided props in the nested property too (InputProps). So replace this line

<TextField {...params} InputProps={{ disableUnderline: true }} />

With:

<TextField {...params} InputProps={{ ...params.InputProps, disableUnderline: true }} />

Full working code:

<Autocomplete
  options={top100Films}
  getOptionLabel={(option) => option.title}
  style={{ width: 300 }}
  renderInput={(params) => (
    <TextField
      {...params}
      InputProps={{ ...params.InputProps, disableUnderline: true }}
      label="Combo box"
    />
  )}
/>

Live Demo

how to remove the underline of material-ui select?

Add the disableUnderline prop to Select. Here's a modified version of your sandbox: https://codesandbox.io/s/disable-underline-xulxq?file=/src/Dropdown.jsx.

Related answers:

• How can I remove the underline of TextField from Material-UI?
• How to override styles for material-ui TextField component without using the MUIThemeProvider?

Remove Material-Ui TextField border

If you would like a TextField without the outline border, the best thing to do would be to use the Standard variant of the TextField Component.

By default the Standard variant will have an underline beneath the text, but this can be removed by adding InputProps prop and passing in disableUnderline: true:

  <TextField
    InputProps={{disableUnderline: true}}
    variant="standard"
    label=""
    multiline
    rows={55}
    placeholder="# Hello World"
    style={{ width: '90%' }}
  />

The result will look exactly the same as if you had an outlined TextField without the outline.

Note that it's not recommended you do this, though, for usability reasons; it'll make the text field less distinguishable and less of a clear touch target for users on mobile. Make sure you have some other kind of indication that it's a text field.
https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03

Remove underline (bottom border) from MUI Input component

You can set the disableUnderline prop to true to hide the line below the Input:

<Input disableUnderline

Remove underline from Input component Material UI (v1.0 Beta)

As per DOC.

disableUnderline prop =>

disableUnderline : boolean

Default Value: false

Details: If true, the input will not have an underline.

There is a property disableUnderline provided by the DOC, we can directly use that to remove the underline from input element.

Try this:

<Input
     disableUnderline={true}     //here
     classes={classes}
     placeholder={placeholder}
     value={value}
     onChange={onChange} />

how to remove border in textfield fieldset in material ui

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

Removing underline style of autocomplete in react material ui component

You can accomplish this using the <TextField/> props that are rendered to the <AutoComplete/> component. Because <AutoComplete /> uses the <TextField/> you have access to those props. So you actually have two ways of removing the underline of the autocomplete. Unfortunately this is undocumented in the Material-UI docs for autocomplete.

<AutoComplete underlineStyle={{display: 'none'}}>

or

<AutoComplete underlineShow={false}>


edit: This answer is relevant to older versions of Material UI. This answer does not work for version 1.0 or higher.

How to customize material-ui TextField Input underline:after?

You need to omit the inputProps key in styles object.

You also need to provide classses Prop to InputProps:

 const styles = theme => ({
    underline: {
      color: 'red' ,
      '&::after': {
        border: '2px solid red'
      }
    }
 });

 const MyTextField = props => {
   const { classes, ...rest } = props;
   return (
     <TextField InputProps={{ classes: {underline: classes.underline} }} {...rest} />
   );
 };

You can check this working code sandbox example: https://codesandbox.io/s/material-demo-75w7p?fontsize=14

---

Related Topics