I want to change the color of a disabled element within the TextField component when it is hovered over.
To see an example, check out this demo
import * as React from "react";
import TextField from "@mui/material/TextField";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
export default function BasicDatePicker() {
const [value, setValue] = React.useState(null);
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => (
<TextField
{...params}
disabled
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "pink"
},
"& .MuiInputBase-input.Mui-disabled:hover": {
color: "green"
}
}}
/>
)}
/>
</LocalizationProvider>
);
}
Although I can currently see the text in pink, I would like it to change to green when hovering. Is there a way to achieve this effect?