React-autosuggest: How to style the component?

[drjosephliu]

I'm a bit confused as to how to style the component as the documentation isn't so clear.

At the moment I've created theme.css with the following:

.container {
}

.input {
  width: 50vw;
  border: 2px solid #157efb;
  font-size: 20px;
  margin-top: 20px;
}

.suggestionsContainer {
  background-color: green;
  font-size: 20px;
}

.suggestion {
  background-color: yellow;
  font-size: 20px;
}
.suggestionHighlighted {
  background-color: gray;
  font-size: 20px;
}

Then in my compononent, I import it and plug it in as a prop like so:

import theme from './theme.css';
.
.
.
<Autosuggest
        suggestions={symptomSuggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
        getSuggestionValue={this.getSuggestionValue}
        renderSuggestion={this.renderSuggestion}
        inputProps={inputProps}
        alwaysRenderSuggestions={true}
        theme={theme}
      />

Only that it doesn't style anything at all, except container, but I think it's because container is a common class name. When I inspect the HTML i don't see any class names like suggestionsContainer or suggestionHighlighted.

Am I missing something here? Am I suppose install react-themeable?

[rameshkpioneer]

In main page this comment , moroshko given examples in codepen . There moroshko given styles also . I just used it . for your reference iam giving the following link. I just followed this one you can use this,
https://codepen.io/moroshko/pen/LGNJMy in this link copy the css styels and add in your css file and include in your html file this styles will be applied ,=.

[drjosephliu]

Cheers dude. Sorted all my problems out 👍