I've integrated the Mantine DatePicker into my web application and now I want to customize the default style for when a user selects a date.
Here's the current style:
https://i.sstatic.net/hjQOi.png
This is what I'm aiming for:
https://i.sstatic.net/kroSY.png
After reading through the documentation of Mantine DatePicker here, I discovered getDayProps which can help me add styles to the dates. However, I'm unsure about how to implement it.
So far, I have tried this code which changes the color on hovering over a date:
<DatePicker
value={value}
onChange={setValue}
getDayProps={() => {
return {
sx: (theme) => ({
backgroundColor: theme.colors.red[6],
color: theme.black,
...theme.fn.hover({
backgroundColor: theme.colors.violet[7],
color: theme.white,
}),
}),
};
}}
/>