Kevin Powell - Community•2y ago

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>

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

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Change border color of Select component in MUI

Did you find this page helpful?