0

I am building a react app and using material ui for styling. I have a select field with <FormControl> in as below:

<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>

and after rendering it looks like this: enter image description here

I can't change the border color of this select element. I have searched about customizing the select field in material ui but I still couldn't change the border color. The border color should be #9fef00.

Edit: The classes I've used for styling the select field are as follows:

  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"
      }
    },
   

}));
overhaul_
  • 71
  • 7
  • Currently, the code you have included in your question doesn't contain any of your styling code, so there is no way to tell why it isn't working. A [code sandbox](https://codesandbox.io/s/new) reproducing your problem would also be helpful. – Ryan Cogswell Jul 06 '21 at 15:39
  • This answer should cover your needs: https://stackoverflow.com/questions/56958742/cant-change-border-color-of-material-ui-outlinedinput/56958994#56958994 – Ryan Cogswell Jul 06 '21 at 15:43
  • have you tried by adding classes property and modifying outlined css in your select component? also if you share sandbox link that would be helpful to debug the problem – Shubham Kumar Jul 06 '21 at 15:44
  • @RyanCogswell I have edited the question and included the styles – overhaul_ Jul 06 '21 at 16:39

0 Answers0