I'm trying to change some properties like background color and font color in TimePicker using the css className properties, but with no success. Does anyone knows how to do this and where can I find a docummentation with these properties?
<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",
},
}}
value={selectedTime}
onChange={(newTime: any) => setSelectedTime(newTime)}
timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>
You can use slotProps
in TimePicker.
For example:
<TimePicker
/* { ...restProps } */
slotProps={{
popper: {
sx: {
"& .MuiList-root": {
backgroundColor: "yellow",
},
"& .MuiMenuItem-root": {
"&.Mui-selected": {
backgroundColor: "green",
color: "blue"
},
color: "red"
},
"& .MuiDialogActions-root": {
backgroundColor: "black",
},
},
},
}}
/>;
You can see the whole example here: codesandbox.io