I'm trying to change some properties like Clock Color and Ok button fontColor in TimePicker using the css className properties, but with no success. Does anyone knows how to do change it using sx or slotProps?
<TimePicker
ampm={false}
views={['hours', 'minutes', 'seconds']}
sx={{
backgroundColor: "#333335",
font: "white",
color: "#FFFF",
textDecoration: "bold",
input: {
color: "#FFFF",
fontSize: "1.4rem",
},
"& .MuiTimePicker-root": {
backgroundColor: "#222223",
},
"& .MuiTimePicker-input": {
color: "#FFFF",
fontSize: "1.2rem",
},
}}
slotProps={{
popper: {
sx: {
"& .MuiList-root": {
backgroundColor: "#333335",
},
"& .MuiMenuItem-root": {
"&.Mui-selected": {
backgroundColor: "#04395E",
color: "white"
},
color: "white"
},
"& .MuiDialogActions-root": {
backgroundColor: "#333335",
},
"& .MuiSvgIcon-root": {
"&.MuiSvgIcon-fontSizeMedium": {
backgroundColor: "#04395E",
color: "white"
},
color: "white"
},
},
},
}}
value={selectedTime}
onChange={(newTime: any) => setSelectedTime(newTime)}
timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>
Here's a image showing the elements that I want to change the color
You can add the following to the sx
property on the TimePicker
to change the color of the clock icon.
"& .MuiSvgIcon-root": {
color: "white"
},
and for the OK text button you can use the following on the sx
property of the popper
"& .MuiDialogActions-root .MuiButton-text": {
color: "white"
}