How to change MUI input underline color?

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 colors are all white. The rest of the Select instances should remain unchanged.

While I can get the text and icon to change color, I can't seem to figure out how to use the classes prop to set the underline color. 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 color 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

Answer 2

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 3

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