Open jpt opened 5 years ago
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.
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 usingstyled-jsx
along withreact-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 usingstyled-jsx
.style.js
:index.js
: