How to change Material UI input underline colour?

Question

I have a Material UI Select component that is on a dark background, so for just this one component I'd like to change it so that the text and line colours are all white. The rest of the Select instances should remain unchanged.

While I can get the text and icon to change colour, I can't seem to figure out how to use the classes prop to set the underline colour. My attempts also seem to make the open icon wrap to the next line too. Here's an example demonstrating the problem:

I've set my style like this:

const styles = theme => ({
  underline: {
    borderBottom: '2px solid white',
    '&:after': {
      // The MUI source seems to use this but it doesn't work
      borderBottom: '2px solid white',
    },
  }
};

Then I'm setting it like this:

<Select
  classes={{
    underline: classes.underline,     // Does it go here?
  }}
  inputProps={{
    classes: {
      underline: classes.underline,   // Or does it go here?
    },
  }}
>

This method does work for the text (not shown above, but in the linked example), it's just the underline colour that I can't get to change. What am I missing?

score 27 · Accepted Answer · edited May 31 '18 at 11:55

27

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

edited May 31 '18 at 11:55

thirtydot

224,678
48
389
349

answered May 31 '18 at 11:45

noName94

3,783
1
16
32

Is this possible without `createMuiTheme` and without `MuiThemeProvider` ? – Dimitri Kopriwa Jan 05 '19 at 11:08
Yes you can override using `classes` prop provided by the HOC component `withStyles`. Refer here https://material-ui.com/customization/overrides/ – noName94 Jan 07 '19 at 06:29
in your playbox, I couldn't change the color of the label, after clicking the input. Do you know how to do it? – AlbertMunichMar Feb 28 '20 at 21:32
Could someone help me customize the focused borders to pink, and the label to pink? https://codesandbox.io/s/material-demo-ecj1k – AlbertMunichMar Feb 28 '20 at 22:10

NearHuscarl · Answer 2 · 2021-11-06T05:10:26.323

In MUI v5, you can use the sx prop. Below are the examples of 3 different components with customized underline color:

<Input
  sx={{
    ':before': { borderBottomColor: 'red' },
    // underline when selected
    ':after': { borderBottomColor: 'red' },
  }}
/>

<TextField
  variant="standard"
  sx={{
    '& .MuiInput-underline:before': { borderBottomColor: 'orange' },
    '& .MuiInput-underline:after': { borderBottomColor: 'orange' },
  }}
/>

<Select
  variant="standard"
  sx={{
    ':before': { borderBottomColor: 'purple' },
    ':after': { borderBottomColor: 'purple' },
  }}
>

Another alternative is styled():

const options = {
  shouldForwardProps: (prop) => prop !== 'underlineColor',
};
const StyledSelect = styled(
  Select,
  options,
)(({ underlineColor }) => ({
  ':before, :after': {
    borderBottomColor: underlineColor,
  },
}));

<StyledSelect variant="standard" underlineColor="green">

Live Demo

score 1 · Answer 3 · answered Jun 12 '20 at 18:38

If the goal is simply to turn the underline (and text as well), there's a very simple solution, which also works with many other components (<Input>, <TextField>, etc.):

const theme = createMuiTheme({
    palette: {
      type: 'dark',
    },
  });

It will catch the underline and turn it white.

For details on what this will change, in case you want to override elements of it: https://material-ui.com/customization/palette/#dark-mode

(If you've never used a theme before, you'll need to import createMuiTheme and wrap your component in it; see https://material-ui.com/customization/theming/)

How to change Material UI input underline colour?

3 Answers3

Live Demo

Linked