React-autosuggest: Can't style react-autosuggest__container since it doesn't pass className prop

Created on 7 May 2018 · 6Comments · Source: moroshko/react-autosuggest

Since the container/root element does not pass className prop we can't use styled components on it.
Since we're not using any other styling other than styled in our project there is no way for me to set position relative on the root element.

Source

Fralleee

👍4

Most helpful comment

You can also wrap AutoSuggest in a StyledWrapper
ex:

<StyledWrapper>
  <Autosuggest {...yourProps} />
</StyledWrapper>

const StyledWrapper = styled.div`
 & .react-autosuggest__container{
  // your style
  }
`

dayze on 25 Jan 2019

👍11 ❤7 👎2

All 6 comments

I think you can get that to work, please check: https://github.com/moroshko/react-autosuggest#theme-optional

I was able to do with CSS Modules. Should be the same with styled components.

jpggvilaca on 30 May 2018

I think if allow add a custom className to root element, will help a lot.

luizrrodrigues on 16 Oct 2018

👍2

You can also wrap AutoSuggest in a StyledWrapper
ex:

<StyledWrapper>
  <Autosuggest {...yourProps} />
</StyledWrapper>

const StyledWrapper = styled.div`
 & .react-autosuggest__container{
  // your style
  }
`

dayze on 25 Jan 2019

👍11 ❤7 👎2

You can also wrap AutoSuggest in a StyledWrapper
ex:

<StyledWrapper>
  <Autosuggest {...yourProps} />
</StyledWrapper>

const StyledWrapper = styled.div`
 & .react-autosuggest__container{
  // your style
  }
`

What is styled here??