DateRangePicker selection

[Doomfang3]

Hi

First thanks for the work, this lib is amazing :)

I'm trying to use the DateRangePicker and I'm having some problems on the styling. It's on a project where I'm already using Mui v5 so I just installed @mantine/dates and I'm passing classes to classNames to handle the styling.

I wanted to know if there is a way to apply style to the "hovered" days and if there is a way to apply style on the first selected day.

I saw in your source code that the style doesn't seem to be applied as a class for the hovered days so I was wondering if maybe I can overload the colors used by the theme of the component maybe ?

Here's a screen of my current state to help understand what I'm trying to achieve :)

Thanks in advance and have a good day !

[rtivital]

Hi, thanks for kind words and reporting an issue, I've released 3.5.5 patch that resolves your issue, here is a sandbox with an example – https://codesandbox.io/s/funny-driscoll-b03zn?file=/src/App.tsx

[Doomfang3]

Wow thanks for the speedy response !

Your update did exactly what I needed but I couldn't use the same style, I don't know why but I've got a problem with the zIndex and had to reverse the after of first and last in range. It is sureley because of my project but i'll paste the code here in case.

Thanks again and have a great day :)

styles={() => ({
        selected: {
          backgroundColor: `${theme.palette.primary.main}!important`,
          borderRadius: '100px !important',
          position: 'relative',
          color: 'white!important',
        },
        firstInRange: {
          borderRadius: '50% 0 0 50% !important',
          color: 'white!important',
          backgroundColor: `${theme.palette.primary.ultraLight}!important`,
          zIndex: '1',
          '&::after': {
            content: '""',
            borderRadius: '100px !important',
            backgroundColor: theme.palette.primary.main,
            position: 'absolute',
            width: '100%',
            height: '100%',
            right: '0',
            zIndex: '-1',
          },
        },
        lastInRange: {
          borderRadius: '0 50% 50% 0 !important',
          backgroundColor: `${theme.palette.primary.ultraLight}!important`,
          zIndex: '1',
          '&::after': {
            content: '""',
            borderRadius: '100px !important',
            backgroundColor: theme.palette.primary.main,
            position: 'absolute',
            width: '100%',
            height: '100%',
            right: '0',
            zIndex: '-1',
          },
        },
        inRange: {
          backgroundColor: `${theme.palette.primary.ultraLight}!important`,
        },
})}