Styled components will be good if you use it from start, but things could be tricky in terms of mixing it up with other libraries or even your own code. Today, I will show you how to use styled components to generate css class and pass it to the 3rd party lib or your own component.
Let’s say that you have a component called
<DatePicker> and it receives a prop named
className like this:
Then when you use
className prop has already beed resolved when you wrap it with styled components.
Sometimes you want to pass
css as prop and mix it up in the receiver component.
Firstly, your component should be able to process the passed-in
Secondly, declare the
Lastly, pass it down to the child component.
myCSS will be merged into the
Let’s say that
<DatePicker> is a third party library. And it takes 2
props in terms of modifying the styled.
One is called
className and the other is
Then unfortunately, styled component doesn’t support it… You have to use the traditional css tooling like css modules or just pass the css class name as string.
I created an issue here:
Hope it helps. :)