CSS modules theme example

[stewartduffy]

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;
}

[neeasade]

Hello there -- trying to use the above. Do I stick it in a css file and then import theme from './mycssfile.css', and then on the component have theme={theme} ? or am I misunderstanding how css modules works

[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;
        }

[stewartduffy]

Hi @neeasade. Sorry I have taken so long to respond. Yes that is right. Here is my example

import React from 'react'
import Autosuggest from 'react-autosuggest'
import theme from './theme.css'

class MyWrappedAutoSuggest extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            //My State..
        }
    }
    render() {
        return (
            <Autosuggest
                theme={theme}
            />
        )
    }
}


export default MyWrappedAutoSuggest

[himat]

I tried using both those class names, but none of the styling changes for me I saw in the inspector that these are my class names. Am I doing something wrong?

[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.