How to Change Mui Input Underline Colour

How to change MUI input underline colour?

You can change the underline color of Select Component using two options

1. Overriding with classes

Create a <Input /> element using input Props and override using classes using underline key.

<Select
            value={this.state.age}
            onChange={this.handleChange}
            input={<Input classes={{
              underline: classes.underline,
            }}
             name="age" id="age-helper" />}>

I applied this in your sandbox and take a look at this here

2. Using MuiThemeProvider

const theme = createMuiTheme({
  palette: {
    primary: green,
  },
});

And apply the theme using <MuiThemeProvider/>

I have applied both in this sandbox

Customising Select

Material-UI Input component underline color

try like this

.MuiInput-underline-24:hover:not(.MuiInput-disabled-23):not(.MuiInput-focused-22):not(.MuiInput-error-25):before {
    border-bottom: 2px solid rgb(255, 255, 255) !important;
}

material ui next dialog textfield underline color

Assuming you are using material-ui-next, you can use overrides in createMuiTheme.

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        '&:before': { //underline color when textfield is inactive
          backgroundColor: 'red',
        },
        '&:hover:not($disabled):before': { //underline color when hovered 
          backgroundColor: 'green',
        },
      }
    }
  }

});

Then wrap you app with MuiThemeProvider

ReactDOM.render(
 <MuiThemeProvider theme={theme}>
   <Root />
 </MuiThemeProvider>,
 document.getElementById('root')
);

It will overwrite underline color of all TextField material-ui components. If you need to change color only for one TextField, use https://material-ui-next.com/customization/overrides/#1-specific-variation-for-a-one-time-situation

Change Color of Text Field from Text Field in Material UI v5

According to docs, InputProps accepts:

Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.

Therefore, style: { color: "red" } doesn't work because the aforementioned components don't accept the style prop and color prop accepts theme colors such as secondary , error etc.

You can customize the color and background of your TextField with sx prop:

      <TextField
        id="outlined-basic"
        variant="outlined"
        sx={{
          input: {
            color: "red",
            background: "green"
          }
        }}
      />

Change borderBottomColor of MUI TextField when input is filled

Solved this by simply passing sx with conditional styles to TextField.

     sx={{
      "& .MuiInput-underline::before":
        textInputValue !== ""
          ? { borderBottomColor: "blue" }
          : { borderBottomColor: "grey" },
    }}

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