Material-UI: Select border color on hover

1
votes

I am able to change the

"before" enter image description here

and "after" enter image description here

border color to grey in dark mode. However, when I hover my mouse to the "Select" field, it become black. enter image description here

How can I change that? Thank you very much!

Resources:

Change color of Select component's border and arrow icon Material UI

1
reactjsmaterial-ui

1 Answers

0
votes

The border-bottom style of the Input changes when you hover it. This is how you override the border color:

const useStyles = makeStyles((theme: Theme) => ({
  formControl: {
    "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
      borderColor: "blue"
    }
  },
  select: {
    "&:before": {
      borderColor: "red"
    },
  }
}));

Usage

<FormControl className={classes.formControl}>
  <InputLabel>Age</InputLabel>
  <Select className={classes.select} {...props}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

Live Demo

Edit 66979649/material-ui-select-border-color