Material UI: How can I change the border color of the Select component?

2
votes

I am trying to customize the Select component from Material UI.

This is what it looks like:

enter image description here

However, when the select component is focused, I want to change the border-color from material UI's blue to a custom red color.

I tried setting the styles but it doesn't do anything at all

import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import MuiSelect from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  select: {
    borderColor: '#FF0000',      //<------------ this does nothing
  },
}));

const Select = () => {
  const classes = useStyles();
  return (
    <FormControl variant="outlined" className={classes.formControl}>
      <InputLabel>Months</InputLabel>
      <MuiSelect label="Months" className={classes.select}>
        <MenuItem value="1">January</MenuItem>
        <MenuItem value="2">February</MenuItem>
        <MenuItem value="3">March</MenuItem>
        <MenuItem value="4">April</MenuItem>
      </MuiSelect>
    </FormControl>
  );
};

Select.propTypes = {};

export default Select;
1
cssreactjsmaterial-ui

1 Answers

2
votes

Try this:

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  select: {
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: 'red',
    },
  },
}));