如何更改边框颜色材质-UI选择组件

Question

我尝试了几种策略来更改材质UI的select组件的颜色，但不幸的是，它们都无效。我定义了useStyles函数，在其中定义了带有边框值的选择类：

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
    width: '100%',
    margin: 0,
    marginBottom: 15,
    borderColor: 'orange'
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
  select: {
    '&:before': {
      borderColor: 'red',
  }
 },
}))

这是选择组件：

const MaterialSelect = ({
  labelText, 
  menuItems, 
  setFormValue, 
  initValue,
  providerKey
}) => {
  const classes = useStyles();

然后选择：

 <Select
    labelId="demo-simple-select-outlined-label"
    id="demo-simple-select-outlined"
    value={value}
    onChange={handleChange}
    labelWidth={labelWidth}
    className={classes.select}
    input={<Input classes={{
      underline: classes.underline
    }}
    name="age" id="age-helper" />}
  >
    {menuItems.map(({value, text}) => (
      <MenuItem value={value}>{text}</MenuItem>
    ))}
  </Select>