Css 材质UI：如何更改选定组件的边框颜色？

我正在尝试从材质UI自定义选择组件

这就是它看起来的样子：

但是，当“选择”组件聚焦时，我希望将边框颜色从材质UI的蓝色更改为自定义的红色

我试着设置样式，但根本没用

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;

试试这个：

const useStyles=makestylesTime=>{ 表单控制：{ 页边空白：theme.spacing1， 最小宽度：120， }, 选择：{ “&.Mui-focused.MuiOutlinedInput-notch-doutline”：{ 边框颜色：“红色”， }, }, };

---

我编辑了答案，因为最初我使用了文本字段而不是选择字段。若要使用Select，嵌套选择器在&and.Mui-focused之间不应有空格。请参阅。