更改材质 ui 中选择字段的边框颜色

Question

我正在构建一个 React 应用程序并使用 Material ui 进行样式设置。我有一个带有 <FormControl> 的选择字段，如下所示：

<FormControl
      size="small"
      style={{ width: "320px" }}
      variant="outlined"
      className={classes.formControl}
    >
      <InputLabel className={classes.inputlabel} id="demo-simple-select-outlined-label">Gender</InputLabel>
      <Select
      
      className={classes.select}
        labelId="demo-simple-select-outlined-label"
        id="demo-simple-select-outlined"
        value={gender}
        onChange={handleGender}
        label="Gender"
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value="Male">Male</MenuItem>
        <MenuItem value="Female">Female</MenuItem>
        <MenuItem value="Other">Other</MenuItem>
      </Select>
    </FormControl>

渲染后，它看起来像这样：

我无法更改此选择元素的边框颜色。我已经搜索过在材料 ui 中自定义选择字段，但我仍然无法更改边框颜色。边框颜色应该是#9fef00。

编辑： 我用于设置选择字段样式的类如下：

  const useStyles = makeStyles((theme) => ({

  inputlabel: {
    color: "#9fef00",
    "&.Mui-focused": {
      color: "#9fef00",
  },},
  select: {
    color: "#9fef00",
    "&:before": {
      borderColor: "red"
    },
  },
    formControl: {
      "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
        borderColor: "red"
      }
    },
   

}));