[V2] Using anchor with react-router break styled <ThemeProvider />

[kopax]

I have found a bug in v2.0.0-5

When clicking on url that use an anchor, the <ThemeProvider /> has no more effect.

Reverting to v1.4.3 solve the issue.

Version

2.0.0-5

Reproduction

http://www.webpackbin.com/NJGs7ebqG
https://webpackbin.herokuapp.com/NJGs7ebqG

Steps to reproduce

Use the anchroScroll method from here in your react-router : remix-run/react-router#394 (comment)

Expected Behavior

To scroll to the anchor in question

Actual Behavior

It scroll but It also break the <ThemeProvider /> and use the theme from defaultProps instead.

[kopax]

@mxstbr

This bug is a bit more critical than I though.

I also encounter the same issue using react-redux.

In my <LoginForm /> when onChange is triggered on <input name="username" />, the redux store get updated.

The <ThemeProvider /> break the same way as with react-router:

My onChangeUsername event listener is fairly simple, it only dispatch an action changeForm.

Almost all our apps use styled-components v2 and are impacted by this bug.
Does anyone has a quick fix while waiting for this?

edit

This is odd, I wanted to create a webpackbin to demonstrate the Provider issue I have on my application.

I did https://www.webpackbin.com/bins/-Kes0_aG4mPlMjsm98Hy

The thing is I can't reproduce the bug there.

Indead, it might be the wrong reason but there is definitively something wrong with ThemeProvider.

Here is the most strange fact about this bug :

• Using withTheme, I was able to console.log(theme['$green']) in css and in render. The logged value is the value passed to ThemeProvider in both case !! However, the css rules from the new generated vendor className use the defaultProps.theme['$green']

[santaclauze]

Seems to be the same issue : #574

[kopax]

Corrected and released in 2.0.0-9.