[V2] Theming doesn't work with reactstrap 4.2.0

Hi everyone,

I have read this very recent article claiming styled-components is the future so I decided to give a try.

I want to to customize my reactstrap app. (React equivalent of Bootstrap 4)

I don’t wan’t to import the bootstrap css stylesheet. I rather make my own styling based on the class used in bootstrap. This is where styled-components come from! I Hoped…

For some reason, the custom theme passed to the <ThemeProvider theme={theme} /> disappear for the one I’ve configured in my component Button.defaultProps right after a re-rending due to state change.

I’ve looked into their Button components and I still wonder, their components are fairly simple.

I have created a webpackbin to demonstrate the issue.

I have also opened an issue on reactstrap: https://github.com/reactstrap/reactstrap/issues/355

According to @TheSharpieOne

Yeah, definitely looks like an issue on styled-components side. … Seems like Styled(*) shouldn’t be passing down the props it uses. […] IDK, but looking at this line in styled-components it looks like it only subscribes and doesn’t set the initial state based on the [default] props.

Version

styled-components 2.0.0-7 reactstrap 4.2.0

Reproduction

https://www.webpackbin.com/bins/-KetejqQhRZrV5MyzPpr

Steps to reproduce

Click on the button within the reproduction and see.

Expected Behavior

Custom theme to be applied

Actual Behavior

Default theme is applied

[k15a]

Ok this is a bug with v2 only. I think I have already fixed that bug in v1 so I will have to search for the PR.

The corresponding PR is https://github.com/styled-components/styled-components/pull/450. @mxstbr Do all the v1 PR’s get merged into v2 before final release or should I submit a new PR for v2?

[nik72619c]

Hi guys, I am using reactstrap (v6.4.0) and styled-components(v5.1.1) and using ThemeProvider to provide theme to all the styled-components in the app. But due to some reason, the theme prop is not available inside the styled-components created inside the reactstrap Tooltip component. Helps appreciated, thanks ! @mxstbr @kopax @k15a