Having multiple versions of react-dates on same page with different styles

[oriooctopus]

I have two separate date pickers on the same page, and I need to target each with different custom styles. As written in the docs, the only way to add custom styles is via global styles and not scoped local styles. That might still be ok, but it doesn't seem like there's any way to add a special classname to the datepicker, which would allow me to have the global styles target each specific usage.

So my question is, if I have to use global styles and I can't add a custom class name, how can I have multiple datepickers with different styles on the same page?

[ljharb]

Add a unique class name to a container element around each datepicker, and target them that way.

[oriooctopus]

@ljharb the issue with this is that wouldn't affect the actual popup, it would only affect the original input. The popup is rendered I guess via a portal and is not a descendant of the original parent

[ljharb]

That is a fair point.

[oriooctopus]

@ljharb I'm glad you agree :) Do you think it's possible to add a wrapper class prop for the popup?