React-datepicker: Apply CSS class to datepicker__input-container

[formigone]

I need to float the input to the left. So I'm trying

<DatePicker className="w-fleft" />

But the above generates the following - unfloated DOM:

<div class="datepicker__input-container">
    <input type="text" class="w-fleft" />
</div>

How can I apply my w-fleft class to that wrapper container?

I don't want to create a CSS rule to float .datepicker__input-container because not all instances will be floated.

[martijnrusschen]

What about wrapping the container in a wrapper? I know this sounds a bit odd, but that prevents adding extra functionality.

[wasinsandiego]

There is a use case that may be more common as CSS Modules becomes more widely used. Styling child class names you don't control from a css module class requires use of the :global exception.

I ran across this issue when trying to make the date picker input fields be width: 100% for a responsive layout. Simply setting the input width to 100% doesnt work because the wrapper is styled with display: inline-block and no width defined. The following is how we styled the react-datepicker__input-container class to get this working:

.myDatePickerWrapper {
  width: 100%;
  & :global .react-datepicker__input-container {
    width: 100%;
  }
}

.myCustomDatePickerInput {
  width: 100%;
}

While this works, we lose some features of CSS Modules within a :global block, like composes. There is also a potential risk of the class name used on the internal wrapper changing on us.

Perhaps surfacing a 'width' property would work, but an option for wrapperClassName would be more flexible. I understand every corner case cannot be covered, but wanted to mention this use case as it may be common for anyone creating responsive layouts and using CSS Modules.

Great component by the way, thank you.

[Billy-]

+1 I have just run into this issue with css-modules. Imo being able to add a class to the top-level container is more important than the input itself... As you can always style that with .container-class input