Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago
Endeav6r

Change border color of Select component in MUI

How do I change the hover and focus border color of the Select component in MUI?

I was able to change the border color using the class provided by MUI, but I can't do the same on hover and focus

(Hover is currently black, and the focus is blue but I'm trying to make it white)

Here's my code:
<FormControl
          sx={{
            width: "15rem",
            maxWidth: "100%",
            marginRight: "1em",
            "& .MuiSvgIcon-root": {
              fill: "white",
            },
          }}
        >
          <InputLabel
            id="demo-simple-select-label"
            sx={{color: "white"}}>
            Label
          </InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={page}
            label="Label"
            sx={{
              color: "white",
              "& .MuiOutlinedInput-notchedOutline": {
                borderColor: "white",
              },
              "& .MuiOutlinedInput-notchedOutline:hover": { //not working
                borderColor: "white",
              },
              "& .MuiOutlinedInput-notchedOutline:focus": { //not working
                borderColor: "white",
              },
            }}
            onChange={handleChange}
          >
            <MenuItem value={"Overview"}>Overview</MenuItem>
          </Select>
        </FormControl>
image.png
image.png
Was this page helpful?