React-dates: Allow to pass custom classNames

[pascalduez]

Hi,

would it be acceptable to add the ability to pass custom classes in addition to the existing ones ?
At least on the root element.
For instance on the SingleDatePicker
https://github.com/airbnb/react-dates/blob/master/src/components/SingleDatePicker.jsx#L411

Just concatenating the className property.

<div className={classNames('SingleDatePicker', this.props.className)}>

You get the idea.

I could open a MR, just wanted to get a kind of approbation before.

[majapw]

Hi @pascalduez, adding custom classes kind of goes against our ethos of writing react components. We would ideally want to isolate the components in such a way that side-effects are explicitly defined through props (the fact that we use css at all right now doesn't wholly comply with that), and as we move to a more CSS in JS solution in general, we will be even stricter in that respect.

Can you elaborate a bit more explicitly on what you'd want to accomplish by adding a new class? Maybe we can add that functionality as a prop.

[pascalduez]

Hey @majapw,

my current use case is as follow: I need to make the field match our design, which consist of a rather basic text field with a button on the right side. That button is supposed to trigger the calendar widget.

So my wrapping component looks roughly like:

<div>
  <SingleDatePicker />
  <button>
    <Svg />
  </button>
</div>

I have two variants at the moment, one that use a sort of 'fit-content' witdh and one that use 100% of the parent, possibly more to come.

Given we use CSS modules that's how I manage to target the SingleDatePicker ATM:

.block :global(.SingleDatePicker) {
  flex-grow: 1;
}

If I were able to pass custom classes to the root element of the SingleDatePicker I could just use a local classes.

.block .widget {
  flex-grow: 1;
}

I understand that the proper way to gain styling and customisation ability would be to set our own <input /> and use the DayPickerSingleDateController. But being a bit in a rush, I appreciate the fact that SingleDatePicker already cares about all the logic out of the box (display toggle, positioning, etc.).

[dnepro]

Or maybe asked this way, what is the most appropriate way to customize the styling? is it really using Sass?

[dmytro-shchurov]

I would add to ask: how to use bootstrap classes with the control? I need it block sized for example...

[majapw]

@dnepro @dmytro-shchurov @pascalduez

Right now, the best way to customize the styling is to override class styles themselves. For instance, we have a _datepicker_overrides sass file that does some stuff like:

.SearchForm {
  .DateRangePicker {
    width: 100%;
    text-align: left;
  }

  .DateRangePickerInput {
    margin: 0 -10px;
    width: auto;
    display: block;
    border-style: hidden;
  }
  ...
}

This will likely not be true for too much longer as we move to a react-with-styles implementation, but for now, that's the recommendation.

[kunokdev]

I didn't want to add react-with-styles dependency and kept using the default CSS and I had case where I needed this component to look different depending on the given props. Since react-dates doesn't support adding className to the element, I wrapped it within div and added class to the wrapper element. Then within CSS file I could use different styles via selectors like this:

.myCustomClassName {
  .DateInput { ... }
}