Having trouble getting both focus and hover effects to work on the same MUI styled component in React. Check out this code sandbox for a demonstration. When clicking on the Select element, the background and border colors do not change:
https://i.sstatic.net/hBZ8d.png
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"
}
}));
Struggling to figure out why this is happening or how to resolve it?