I am trying to change the color of the background of the MUI date time picker’s popper for desktop and mobile :
I want to change the black / grey background to lightgreen
I have tried to use ‘popper’, ‘mobilePopper’ and ‘desktopPopper’ but none of those selectors seem to work.
Here is what I have tried that does not work :
const popperSx : SxProps = {
"& .MuiPaper-root" : {
backgroundColor: 'lightgreen!important', // doest not work
}
}
const OurDateTimePicker = ({
value,
setValue,
sx,
name,
label,
clearable,
disabled,
helperText,
onBlur,
error
}: OurDateTimePickerProps) => {
const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs(value))
useEffect(() => {
setSelectedDate(dayjs(value))
}, [value])
const handleSelectedDate = (newValue: Dayjs | null) => {
setSelectedDate(newValue)
if (newValue)
setValue(new Date(newValue.format('YYYY-MM-DDTHH:mm:ss')))
}
const [cleared, setCleared] = useState<boolean>(false)
useEffect(() => {
if (cleared) {
setValue(null)
const timeout = setTimeout(() => {
setCleared(false)
}, 1500)
return () => clearTimeout(timeout)
}
return () => { }
}, [cleared])
const handleBlurWrapper = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
onBlur?.(event);
}
return (
<Box sx={sx}>
<LocalizationProvider
dateAdapter={AdapterDayjs}
adapterLocale={"fr"}
localeText={frFR.components.MuiLocalizationProvider.defaultProps.localeText}>
<DateTimePicker
name={name}
value={selectedDate}
onChange={handleSelectedDate}
sx={{ width: "100%" }}
label={label}
slotProps={{
field: { clearable: clearable, onClear: () => setCleared(true) },
textField: {
helperText: helperText,
error: error,
onBlur: handleBlurWrapper,
},
mobilePaper: popperSx,
desktopPaper: popperSx,
popper: popperSx
}}
disabled={disabled}
/>
</LocalizationProvider>
</Box>
)
}