title: using react-with-style to style a react-dates component
body: <p>I use a react-dates date picker in my site and recently updated to version 16 (from a pre-13 version). Since the new version has pretty different markup from the previous versions, my custom style sheets are irrelevant and instead of customising stylesheets again I would prefer to use the react-with-styles option of customising. The problem is, I can't seem to work out how it works and the documentation is a little unclear.</p>
  
  <p>What I have now is basically this:</p>
  
  <pre><code>// Css file imported elsewhere
  import 'react-dates/initialize';
  import { SingleDatePicker } from 'react-dates';
  
  export default class MyComponent extends Component {
  
      render() {
  
          return &lt;div className="myWrapper"&gt;
              &lt;SingleDatePicker
                  ...
              /&gt;
          &lt;/div&gt;
      }
  }
  </code></pre>
  
  <p>This works, but requires me to customise a css file. Instead of this, I would like to use the react-with-styles to avoid having to import the css-file, but I can't seem to get that to work. I have looked at at <a href="https://github.com/airbnb/react-with-styles" rel="nofollow noreferrer">https://github.com/airbnb/react-with-styles</a> but just can't seem to get the hang of it.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
  import aphroditeInterface from 'react-with-styles-interface-aphrodite';
  import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
  import {SingleDatePicker} from 'react-dates';
  import { withStyles } from 'react-with-styles';
  
  // Not sure what this does. Sets DefaultTheme + aphroditeInterface globally?
  ThemedStyleSheet.registerTheme(DefaultTheme);
  ThemedStyleSheet.registerInterface(aphroditeInterface);
  
  class MyComponent extends Component {
  
      render() {
  
          return &lt;div className="myWrapper"&gt;
              &lt;SingleDatePicker
                  ...
              /&gt;
          &lt;/div&gt;
      }
  }
  
  
  export default withStyles(() =&gt; ({
      // Not sure what this part does
  }))(MyComponent);
  </code></pre>