Add styled-jsx documentation

[jpt]

Hi! Love this library. According to the docs here, there is support for CSS Modules, Radium, Aphrodite, JSS, Inline styles, and global CSS -- but not styled-jsx (popular amongst Next.js users), which is what we use at Shift.org. One of our engineers came up with a great solution for using styled-jsx along with react-autocomplete.

I could add to the docs here and submit a PR, or I could submit the PR to react-themeable -- probably both? Seems related to #400. In either case, I bet it's a common enough use case that it's worth documenting.

Here's a snippet using react-autosuggest__suggestions-container--open as an example class being custom themed using styled-jsx.

style.js:

import css from 'styled-jsx/css';

const color = 'blue';

const {
  className: suggestionsContainerOpen,
  styles: suggestionsContainerOpenStyles,
} = css.resolve`
    border: 1px solid ${color};
`;

export default {
  theme: {
    suggestionsContainerOpen,
  },
  styles: [
    suggestionsContainerOpenStyles,
  ],
}

index.js:

import Autosuggest from 'react-autosuggest';
import style from './style';
...

return (
  <React.Fragment>
    <Autosuggest
      theme={style.theme}
      ...
    />
    {style.styles.map(styleObj => styleObj)}
  </React.Fragment>
);

[pom421]

For potential readers, I use react-autosuggest with global styled jsx. Exemple of render :

   return (
      <>
         <Autosuggest
            suggestions={autoSuggestData.suggestions}
            onSuggestionsFetchRequested={onSuggestionsFetchRequested}
            onSuggestionsClearRequested={onSuggestionsClearRequested}
            getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            inputProps={inputProps}
         />

         <style jsx global>{`
            .react-autosuggest__container {
               position: relative;
            }

            .react-autosuggest__input {
               width: 240px;
               height: 30px;
               padding: 10px 20px;
               font-family: "Open Sans", sans-serif;
               font-weight: 300;
               font-size: 16px;
               border: 1px solid #aaa;
               border-radius: 4px;
               -webkit-appearance: none;
            }

            .react-autosuggest__input--focused {
               outline: none;
            }

            .react-autosuggest__input::-ms-clear {
               display: none;
            }

            .react-autosuggest__input--open {
               border-bottom-left-radius: 0;
               border-bottom-right-radius: 0;
            }

            .react-autosuggest__suggestions-container {
               display: none;
            }

            .react-autosuggest__suggestions-container--open {
               display: block;
               position: relative;
               top: -1px;
               width: 280px;
               border: 1px solid #aaa;
               background-color: #fff;
               font-family: "Open Sans", sans-serif;
               font-weight: 300;
               font-size: 16px;
               border-bottom-left-radius: 4px;
               border-bottom-right-radius: 4px;
               z-index: 2;
            }

            .react-autosuggest__suggestions-list {
               margin: 0;
               padding: 0;
               list-style-type: none;
            }

            .react-autosuggest__suggestion {
               cursor: pointer;
               padding: 10px 20px;
            }

            .react-autosuggest__suggestion--highlighted {
               background-color: #ddd;
            }
         `}</style>
      </>

The drawback is that the CSS is global, so not compartimented to the component with this render (neither taking advantage of the code splitting). But the class names are rather specific so it seems acceptable for me.