I have a custom styled Mui TextField called CustomTextField. It changes the input background color and font color on hover, but I also want to change the label font color when hovered over. Currently, the input background changes from black to white on hover, with the font color doing the opposite. My goal is to make the label color change from white to black when hovered over.
How can I achieve this? I attempted to add an OnMouseOver and OnMouseLeave event listener and manually set the label color, but adding the OnMouseOver listener seems to break the TextField completely. Here is my current code:
const CustomTextField = styled((props) => (
<TextField
InputLabelProps={{
// getTextColor() checks a state variable called hoveredControl which stores
// the id of the currently hovered component. If the hoveredControl is this input,
// set the text color to black, otherwise set it to white.
sx: { color: getTextColor(props.id) },
}}
InputProps={{ disableUnderline: true }}
{...props}
/>
))(({ theme }) => ({
"& .MuiFilledInput-root": {
overflow: "hidden",
borderRadius: 4,
backgroundColor: "#232323",
color: "#FFFFFF",
border: "1px solid",
borderColor: "#2D3843",
transition: theme.transitions.create(["border-color", "background-color", "box-shadow"]),
"&:hover": {
backgroundColor: "#bdbdbd",
color: "#000000",
},
"&.Mui-focused": {
color: "#000000",
backgroundColor: "#bdbdbd",
boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
borderColor: theme.palette.primary.main,
},
},
}));