react-dates: theme not working with react 16

Hmm, I think (1) I’m going to add some clarification to the theming section about how that requires the registration of an interface as well and (2) I think we need a better solution for theming with the default CSS interface. 😕

Right now, if you are using the CSS interface and want to change your own styles using the theme, you will have to build your own stylesheet a la https://github.com/airbnb/react-dates/blob/master/scripts/buildCSS.js. Maybe we should expose a way to pass in a new theme to this script so you can use it directly (right now it just always uses the default).

You can also create your own stylesheet and override styles directly there, a la:

.CalendarDay__highlighted_calendar {
  background: #82E0AA;
  color: #186A3B;
} 

.CalendarDay__highlighted_calendar:hover {
  background: #58D68D;
  color: #186A3B;
}

.CalendarDay__highlighted_calendar:active {
  background: #58D68D;
  color: #186A3B;
}

to achieve the same effect. I will look into adding some more helper scripts and clarifying the documentation today.

… If you want to use thing right now out of the box and don’t want to mess with react-with-styles too much, I would recommend overriding the classes like above ^^.

I agree that the theming documentation is fairly confusing for someone not familiar with react-with-styles. I’ve been trying to make stylistic changes to the datepicker for a second day in a row and been finding it incredibly frustrating. Do I need to configure a separate wrapper component to make changes to the theme? Any examples?

Note for people overriding any styles: a number of the class names have slightly changed and some have been removed/new ones added. You may need to verify the class names you are overriding have not been changed.

I have it working now by essentially using react-with-styles HOF withStyles to pass computed styles to my wrapper class.

import 'react-dates/initialize';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
import React from 'react';
import { SingleDatePicker } from 'react-dates';
import {  withStyles } from 'react-with-styles';

class SingleDatePickerWrapper extends React.PureComponent {
  render() {
    return(<SingleDatePicker {...this.props} ... />);
  }
}

export default withStyles(() => ({
  ...DefaultTheme,
  color: {
    ...DefaultTheme.color,
    highlighted: {
      backgroundColor: '#82E0AA',
      backgroundColor_active: '#58D68D',
      backgroundColor_hover: '#58D68D',
      color: '#186A3B',
      color_active: '#186A3B',
      color_hover: '#186A3B',
    },
  },
}))(SingleDatePickerWrapper);

Will raise a PR with updated documentation tonight (and clearer example than above) if that’s alright with you.

Resources:

• https://github.com/airbnb/react-with-styles
• https://github.com/airbnb/react-dates

@gitowiec it’s going! I’m focusing on writing up detailed prop descriptions rn. Um, for your code in particular, it kind of looks like the css is not being loaded at all! Can you check that (a) the classes are being applied as expected and (b) that the stylesheet is being loaded correctly?

Hi all, I’ve clarified the instructions quite a bit in the README. Please let me know if you have any feedback or if anything can still be adjusted!

I will be working on some

@majapw Not entirely sure, but something seems amiss based on the shape of the object being passed to withStyles in the code example here: https://github.com/airbnb/react-dates/issues/758#issuecomment-335533296

e.g. all of those properties should be nested under reactDates:, right?

Hm, SingleDatePicker should already have withStyles on it, and you shouldn’t be able to pass a styles prop to it at all 😕