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

I'm trying to use a Material UI Select component on a dark background:

enter image description here

But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following:

const styles = theme => {
    root: {
       borderBottom: '1px solid white',
    },
    icon: {
       fill: 'white',
    },
}

class MyComponent extends React.Component {

    render() {
        const {classes} = this.props;
        return (
            <Select
                value={this.props.value}
                inputProps={{
                    classes: {
                        root: classes.border,
                        icon: classes.icon,
                    },
                }}
            >
                <MenuItem
                    value={this.props.value}
                >
                    Foo
                </MenuItem>
            </Select>   
        )
    }
}

However, I cannot seem to set the color of the underline while the Select component is in focus, i.e. with the above code, I get the white underline and icon, but while focus is on the component the underline stays black.

cssreactjsmaterial-ui


Solution 1:[1]

With some help from Jan-Philipp I got everything colored white, also while the component stays in focus:

const styles = theme => ({
    select: {
        '&:before': {
            borderColor: color,
        },
        '&:after': {
            borderColor: color,
        }
    },
    icon: {
        fill: color,
    },
});


class MyComponent extends React.Component {

    render() {
        const {classes} = this.props;
        return (
            <Select
                value="1"
                className={{classes.select}}
                inputProps={{
                    classes: {
                        icon: classes.icon,
                    },
                }}
            >
                <MenuItem value="1"> Foo 1</MenuItem>
                <MenuItem value="2"> Foo 2</MenuItem>
            </Select>   
        )
    }
}

Not a very pretty solution to getting the right contrast, but it does the job.

Edit The above answer is missing some code, and is also missing the hover color, as suggested by @Sara Cheatham. See updated hooks based solution:

const useStyles = makeStyles({
    select: {
        '&:before': {
            borderColor: 'white',
        },
        '&:after': {
            borderColor: 'white',
        },
        '&:not(.Mui-disabled):hover::before': {
            borderColor: 'white',
        },
    },
    icon: {
        fill: 'white',
    },
    root: {
        color: 'white',
    },
})

export const MyComponent = () => {
    const classes = useStyles()
    return (
        <Select
            className={classes.select}
            inputProps={{
                classes: {
                    icon: classes.icon,
                    root: classes.root,
                },
            }}
            value='1'
        >
            <MenuItem value='1'> Foo 1</MenuItem>
            <MenuItem value='2'> Foo 2</MenuItem>
        </Select>
    )
}

Solution 2:[2]

You can change the bottom border color with the following code. Hope this helps you.

const styles = theme => ({
  select: {
    "&:before": {
      borderColor: "red"
    }
  }
});

const MySelect = ({ classes }) => (
  <Select value="1" className={classes.select}>
    <MenuItem value="1">Option 1</MenuItem>
    <MenuItem value="2">Option 2</MenuItem>
    <MenuItem value="3">Option 3</MenuItem>
  </Select>
);

Example in CodeSandbox

Solution 3:[3]

You can access input (and the underline) like so:

<Select
  autoWidth
  classes={{
    root: styles.root,
    select: styles.select
  }}
  displayEmpty
  input={
    <Input
      classes={{
        underline: styles.underline
      }}
    />
  }
  onChange={this.onChange}
  value=""
>

Solution 4:[4]

select: {
   '&:before': {
        borderColor: 'var(--galaxy-blue)',
    },
    '&:hover:not(.Mui-disabled):before': {
        borderColor: 'var(--galaxy-blue)',
    }
},

<Select
   className={classes.select}
   value={selected}
   onChange={this.handleChange}
>

Solution 5:[5]

This worked for me:

import {
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  OutlinedInput as MuiOutlinedInput,
} from "@material-ui/core";
    
const OutlinedInput = withStyles((theme) => ({
  notchedOutline: {
    borderColor: "white !important",
  },
}))(MuiOutlinedInput);

const useStyles = makeStyles((theme) => ({
  select: {
    color: "white",
  },
  icon: { color: "white" },
  label: { color: "white" },
}));

function Component() {
  return (
    <FormControl variant="outlined">
      <InputLabel id="labelId" className={classes.label}>
        Label
      </InputLabel>
      <Select
        labelId="labelId"
        classes={{
          select: classes.select,
          icon: classes.icon,
        }}
        input={<OutlinedInput label="Label" />}
      >
        <MenuItem>A</MenuItem>
        <MenuItem>B</MenuItem>
      </Select>
    </FormControl>
  );
}

Solution 6:[6]

I faced the same problem and I fixed it this:

I added the .css file into react file:

import './index.css';

<Select
    labelId="demo-simple-select-standard-label"
    id="demo-simple-select-standard"
    value={selectedRegion}
    onChange={handleChangeSelectOption}
    label="region"
    className="select-options-navbar-main-color"
>
    {regionList.map((item)=>{
         return <MenuItem key={item} value={item}>{item}</MenuItem>
    })}
</Select>

and at the end the most important file .css file:

:root{
  --select-options-navbar-main-color: white;
}

.select-options-navbar-main-color div{
  color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color::before {
  border-color: var(--select-options-navbar-main-color) !important;
  
}

.select-options-navbar-main-color::after {
  border-color: var(--select-options-navbar-main-color) !important;
  
}

.select-options-navbar-main-color:not(.Mui-disabled):hover::before {
  border-color: var(--select-options-navbar-main-color) !important;
  
}

.select-options-navbar-main-color svg{
  fill: var(--select-options-navbar-main-color) !important;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jan-Philipp
Solution 3 sebap
Solution 4 Sarah Cheatham
Solution 5 Vicente Losada Fadul
Solution 6 Raskul

Related Questions