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

Answer 1

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/)

Answer 2

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