How to customize selected date styles in Mantine DatePicker?

Question

So I am adding Mantine DatePicker in my webapp. I want to customise the default style when user selects the date.

Current style:

What I am looking for:

Going through the documentation of Mantine DatePicker here, I learnt about getDayProps which can help me to add styles to date but I am not sure how can i do that?

Till now I have done like this which changes color on hovering the 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,
                }),
              }),
            };
          }}
        />

Answer 1

So I got how to do it:

For just Date Picker:

<DatePicker
  date={date}
  onDateChange={setDate}
  value={value}
  onChange={handleChange}
  styles={{
    day: {
      "&[data-selected], &[data-selected]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
      },
    },
  }}
/>

For DatePicker with type="range":

<DatePickerInput
  type="range"
  valueFormat="DD MMM, YY"
  value={value}
  onChange={setValue}
  numberOfColumns={2}
  placeholder="Pick dates range"
  styles={{
    day: {
      "&[data-selected], &[data-selected]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
      },

      "&[data-in-range], &[data-in-range]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
        opacity: "0.5",
      },

      "&[data-first-in-range], &[data-first-in-range]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
        opacity: "1",
      },

      "&[data-last-in-range], &[data-last-in-range]:hover": {
        backgroundColor: `${accentColor}`,
        color: "white",
        opacity: "1",
      },
    },
    input: {
      "&:focus": {
        borderColor: accentColor,
      },
    },
  }}
/>

You can explore more in DatePicker Styles API Also, see How to use Mantine Styles API