title: How can I use a custom theme with react-dates?
body: <p>I'm trying to style my <a href="https://github.com/airbnb/react-dates" rel="nofollow noreferrer"><code>react-dates</code></a> <code>DayPickerRangeController</code> in Typescript, using <a href="https://github.com/airbnb/react-with-styles" rel="nofollow noreferrer">react-with-styles</a> and <a href="https://github.com/Khan/aphrodite" rel="nofollow noreferrer">Aphrodite</a>. I'm using this code, emulating the code from <a href="https://github.com/airbnb/react-dates#interfaces" rel="nofollow noreferrer">https://github.com/airbnb/react-dates#interfaces</a>:</p>
  
  <pre><code>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'
  </code></pre>
  
  <p>However, when I run this I get this runtime error in console:</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>I do not get this error when:</p>
  
  <ol>
  <li><p>I use the <code>registerInterfaceWithDefaultTheme</code> function from the class (this doesn't allow me to style the component, though). (This surprises me because <a href="https://github.com/airbnb/react-dates/blob/0d2f78c17fe217e7064c324e4b7b28d08679bffe/src/utils/registerInterfaceWithDefaultTheme.js" rel="nofollow noreferrer">the code in <code>registerInterfaceWithDefaultTheme</code></a> looks the same as what I have (to me at least))</p>
  
  <pre><code>const aphroditeInterface = require('react-with-styles-interface-aphrodite').default
  
  const registerInterfaceWithDefaultTheme = require('react-dates/lib/utils/registerInterfaceWithDefaultTheme')
  .default
  
  registerInterfaceWithDefaultTheme(aphroditeInterface)
  </code></pre></li>
  <li><p>I use <code>import 'react-dates/initialize';</code> (which eventually calls <code>registerInterfaceWithDefaultTheme</code>). </p></li>
  </ol>
  
  <p>I still get this error when:</p>
  
  <ol>
  <li>I swap the order of registering the theme and the interface</li>
  <li>I add the <code>ThemedStyleSheet</code> code at the top of my <code>src/index</code> file, as opposed to in the same file as the one that uses <code>DayPickerRangeController</code> (This is the suggested fix in <a href="https://stackoverflow.com/a/48558841/1176156">https://stackoverflow.com/a/48558841/1176156</a>)</li>
  <li>I put the exact code from <a href="https://github.com/airbnb/react-dates#interfaces" rel="nofollow noreferrer">https://github.com/airbnb/react-dates#interfaces</a> in Javascript, then import that into my Typescript file that's using <code>DayPickerRangeController</code>.</li>
  </ol>
  
  <p>I have confirmed in the debugger that all of my imports are getting valid code, and not e.g. <code>undefined</code>.</p>