when setting appendToBody,
it sets overflow-y: hidden; inline-style to both html, and body tags
it prevents scrolling of the page when the date picker is open,
removing both inline-styles keeps the modal in the right position and now you can scroll the page,
can you change the inline-style of overflow-y: hidden; to a class? so we can override it,
(I'm not sure what the purpose of it)
This is frustrating. I do think I know the purpose though, which is that if you scroll the page while date-picker is open, it remains fixed to the page rather than scrolling with the content (just try unchecking overflow-y: hidden in devtools to see).
There is a disableScroll property which you can set to false and it should stop adding overflow-y: hidden. However it does not appear to work, and even in the storybook demo it only works on the SingleDatePicker and it doesn't work on the DateRangePicker. Even weirder on the DateRangePicker storybook they are using a property called preventScroll which doesn't appear anywhere else in the documentation (and it doesn't work in the demo). Bleh.
Most helpful comment
There is a
disableScrollproperty which you can set tofalseand it should stop addingoverflow-y: hidden. However it does not appear to work, and even in the storybook demo it only works on the SingleDatePicker and it doesn't work on the DateRangePicker. Even weirder on the DateRangePicker storybook they are using a property calledpreventScrollwhich doesn't appear anywhere else in the documentation (and it doesn't work in the demo). Bleh.