How to change MUI input underline colour?

Question

I have a MUI 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?

Answer 1

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