How can I use a custom theme with react-dates?

Question

I'm trying to style my react-dates DayPickerRangeController in Typescript, using react-with-styles and Aphrodite. I'm using this code, emulating the code from https://github.com/airbnb/react-dates#interfaces:

const ThemedStyleSheet = require('react-with-styles/lib/ThemedStyleSheet').default
const aphroditeInterface = require('react-with-styles-interface-aphrodite').default
const DefaultTheme = require('react-dates/lib/theme/DefaultTheme').default

ThemedStyleSheet.registerInterface(aphroditeInterface)
ThemedStyleSheet.registerTheme(DefaultTheme)

// Importing react-dates after registering the theme, as per the docs.
import * as ReactDates from 'react-dates'

However, when I run this I get this runtime error in console:

Cannot read property 'createLTR' of undefined
TypeError: Cannot read property 'createLTR' of undefined
    at Object.createLTR (http://localhost:6006/static/preview.bundle.js:133281:47)
    at createStyles (http://localhost:6006/static/preview.bundle.js:9710:59)
    at WithStyles.maybeCreateStyles (http://localhost:6006/static/preview.bundle.js:9805:22)
    at WithStyles.componentWillMount (http://localhost:6006/static/preview.bundle.js:9739:20)
    at callComponentWillMount (http://localhost:6006/static/preview.bundle.js:42214:16)
    at mountClassInstance (http://localhost:6006/static/preview.bundle.js:42310:7)
    at updateClassComponent (http://localhost:6006/static/preview.bundle.js:43679:9)
    at beginWork (http://localhost:6006/static/preview.bundle.js:44320:16)
    at performUnitOfWork (http://localhost:6006/static/preview.bundle.js:47152:16)
    at workLoop (http://localhost:6006/static/preview.bundle.js:47181:26)

I do not get this error when:

1. I use the registerInterfaceWithDefaultTheme function from the class (this doesn't allow me to style the component, though). (This surprises me because the code in registerInterfaceWithDefaultTheme looks the same as what I have (to me at least))

   const aphroditeInterface = require('react-with-styles-interface-aphrodite').default
   
   const registerInterfaceWithDefaultTheme = require('react-dates/lib/utils/registerInterfaceWithDefaultTheme')
   .default
   
   registerInterfaceWithDefaultTheme(aphroditeInterface)
   

2. I use import 'react-dates/initialize'; (which eventually calls registerInterfaceWithDefaultTheme).

I still get this error when:

1. I swap the order of registering the theme and the interface
2. I add the ThemedStyleSheet code at the top of my src/index file, as opposed to in the same file as the one that uses DayPickerRangeController (This is the suggested fix in https://stackoverflow.com/a/48558841/1176156)
3. I put the exact code from https://github.com/airbnb/react-dates#interfaces in Javascript, then import that into my Typescript file that's using DayPickerRangeController.

I have confirmed in the debugger that all of my imports are getting valid code, and not e.g. undefined.

Answer 1

This often happens if you are using multiple AirBnB components (usual suspects include react-dates & rheostat) since they all suggest this (in my opinion) slightly hacky solution to styling in their docs.

I'm sure if you do a search for ThemedStyleSheet in your codebase you will find this is not the only place you are using it. Also watch out for various AirBnB component 'initialize' calls, which, if run after your code, will overwrite your theme and provider and cause further trouble. I said it was hacky...

You must lift all ThemedStyleSheet related logic from across your whole codebase to the very top where it should be called just once with a combined, relevant theme before anything else is loaded. (See this github issue: https://github.com/airbnb/rheostat/issues/179)