'Focus doesn't work with hover for MUI styled component?

Not sure why this doesn't work, but I can't seem to use focus and hover in the same MUI styled component for React. Here is a code sandbox to illustrate what I mean. When I click on the Select element, the background and border don't change colors:

enter image description here

const SelectStyle = styled(Select)(({ theme }) => ({
  width: "175px",
  border: `1px solid #C4CDD5`,
  borderRadius: 3,
  fontSize: "1.2rem",
  "&:hover": {
    backgroundColor: "#DFE3E8",
    border: `1px solid #919EAB`
  },
  "&:focus": {
    backgroundColor: "#54D62C",
    border: `1px solid #AAF27F`
  },
  "& .MuiSelect-select": {
    paddingTop: 5,
    paddingBottom: 5,
    fontSize: "1.2rem",
    alignItems: "center",
    display: "inline-flex"
  }
}));

Not sure why this is or how to fix it?

cssmaterial-ui


Solution 1:[1]

Override .Mui-focused class like this :

  "&.Mui-focused": {
        backgroundColor: "#54D62C",
        border: `1px solid #AAF27F`
     }

Here is working example.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nemanja

Related Questions