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

Question

I have success with outline custom styling when variant="outlined" and I use notchedOutline in InputProps.

Otherwise - variant=[anything else] where only a bottom border exists - it doesn't work, even with underline as the key/class in InputProps.

I've even tried root.

export default ({ boxType, classes, value, onChange, style }) => (
  <TextField
    variant={boxType || "standard"}
    value={value}
    onChange={onChange}
    InputProps={{
      classes: {
        notchedOutline: classes.notchedOutline,
        underline: classes.underline,
        root: classes.TextInputField
      },
      style
    }}
  />
)

score 2 · Accepted Answer · answered May 07 '19 at 15:46

In order to determine how to do this, it is helpful to look at how the default styling is done within Input.

:before is used for the default and hover styling and :after is used for the focused styling.

Here is a working example of how to style it:

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  underline: {
    "&:before": {
      borderBottom: "2px solid green"
    },
    "&:hover:not($disabled):not($focused):not($error):before": {
      borderBottom: "2px solid blue"
    },
    "&:after": {
      borderBottom: "3px solid purple"
    }
  },
  disabled: {},
  focused: {},
  error: {}
};
function App({ classes }) {
  return (
    <div className="App">
      <TextField InputProps={{ classes }} />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Methinks you're on to something :-) . Gimme a bit. – Adrian Bartholomew May 07 '19 at 17:41 — Adrian Bartholomew, May 07 '19 at 17:41
Worked like a charm! – Adrian Bartholomew May 07 '19 at 18:12 — Adrian Bartholomew, May 07 '19 at 18:12

score 2 · Answer 2 · answered Feb 06 '20 at 08:42

2

You can just use InputProps={{ disableUnderline: true }}.It will disable the underLine of textField in all cases. Tested on react-material-ui version 3 and above.

answered Feb 06 '20 at 08:42

Thanmai C

741
1
7
10

score 0 · Answer 3 · answered May 07 '19 at 13:37

0

Not sure which version of material-ui you are using, but you can override classes as needed, see the following API documentation:

https://material-ui.com/api/outlined-input/#demos

https://material-ui.com/api/outlined-input/

answered May 07 '19 at 13:37

1

There is no class in that list which targets the `underline`. – Adrian Bartholomew May 07 '19 at 15:04

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

3 Answers3

Linked