CSS modules theme example

Hello,

I love this project, it is working great so far.

Just a suggestion on a docs improvement. I like how you can theme it using CSS modules or inline styles etc, but there is no good CSS modules example.

I just converted the basic styles over to a CSS (not a big thing) but think it would be great if you provided a basic example using CSS modules.

Here is the CSS that I converted from https://codepen.io/moroshko/pen/OpPqxY

.container {
  position: relative;
}

.input {
  width: 240px;
  height: 30px;
  padding: 10px 20px;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.inputFocused {
  outline: none;
}

.inputOpen {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.suggestionsContainer {
  display: none;
}

.suggestionsContainerOpen {
  display: block;
  position: absolute;
  top: 51px;
  width: 280px;
  border: 1px solid #aaa;
  background-color: #fff;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border-radius: 0 0 4px 4px;
  z-index: 2;
}

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

.suggestion {
  cursor: pointer;
  padding: 10px 20px;
}

.suggestionHighlighted {
  background-color: #ddd;
}

[akhayoon]

I had to do this to get it working

        .react-autosuggest__container 
        {
            position: relative;
        }
          
        .react-autosuggest__input 
        {
            width:          100%;
            height:         36px;
            padding:        10px;
            border:         1px solid $chefhero-light-green;
            border-radius:  4px;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
          
        .react-autosuggest__input--focused 
        {
            outline: 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:           absolute;
            top:                33px;
            width:              100%;
            min-width:          160px;
            margin-left:        1px;
            background-color: #FFFFFF;
            border-radius:      0 0 4px 4px;
            z-index:            2;
            box-shadow:         0 6px 12px rgba(0, 0, 0, 0.175);
		    background-clip:    padding-box;
        }
          
        .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: $chefhero-hover-green;
        }

[sturtevant]

I had to name the theme.css file in the example provided by @stewartduffy as <something>.module.css in order to get it working. I think it has something to do with the react-scripts preprocessing.