Server side rendering different class names on routes than on main page, breaking StyledComponents

[SteveReece]

Thanks for filing a bug! To save time, if you're having trouble using the library, please check off the items you have tried. If you are just asking a question, skip right to the bottom.

Please verify these steps before filing an issue, and check them off as you go

• [x ] The relevant native JavascriptEngineSwitcher library packages are installed (such as JavaScriptEngineSwitcher.V8.Native.win-x64)
• [x ] The VC++ 2017 runtime is installed
• [x ] The value of SetUseReact and SetUseBabel is correct in ReactConfig.cs or Startup.cs
• [x ] I've looked at the sample projects in this repo to verify that my app is configured correctly

I'm using these library versions:

• ReactJS.NET: 5.2.12
• JavaScriptEngineSwitcher: v8 3.17.2 win-x64
• react and react-dom: (N/A if using bundled react, or version number) 16.13.0 / 16.14.0
• webpack: (N/A if using bundled react) 4.46.0
• node: (N/A if using bundled react) 14.12.0
• styled-components: 4.4.1

Runtime environment:

• OS: (Mac, Windows, Linux flavor. Include 32-bit/64-bit and version) Windows 10 64 bit
• .NET Framework or .NET Core Version: 6.0

Steps to reproduce

Export a style from a .js file

export const BlogDisplayStyle = styled.div
  background-color: rgba(255,255,255,0.8);

  pre {
    margin-bottom: 0rem;
    background-color: black;
    color: white;
  }

  p {
    background-color: rgba(0,0,0,0) !important;
    font-size: 1.75em !important;
  }
...

Import the style: import { BlogDisplayStyle } from './Styles'

...
<BlogDisplayStyle>
  <Container fluid>
...

Map your routes in the main app.

<Route path='/blog/:id?' render={() => <Blog {...props} />} />
<Route exact path='/' render={() => <Home {...props} />} />

Run the app at / and then click a link to /blog/:id. Observe that the rendered output looks correct and has the style in the

and that it's class name matches the named div in the rendered HTML.

/* sc-component-id: sc-EHOje */
.iBfTWj{background-color:rgba(255,255,255,0.8);} .iBfTWj pre{margin-bottom:0rem;background-color:black;color:white;} .iBfTWj p{background-color:rgba(0,0,0,0) !important;font-size:1.75em !important;} .iBfTWj span{background-color:rgba(0,0,0,0) !important;font-size:1.75em !important;} .iBfTWj h1{font-size:4em !important;} @media (min-width:768px){.iBfTWj h1{font-size:2.75em !important;}.iBfTWj p{font-size:1.1em !important;}.iBfTWj span{font-size:1.1em !important;}}
...
<div class="sc-EHOje iBfTWj">

Now, refresh the page at the route in the browser and observe that the styles are no longer applied and the

class has changed.

/* sc-component-id: sc-EHOje */
.iBfTWj{background-color:rgba(255,255,255,0.8);} .iBfTWj pre{margin-bottom:0rem;background-color:black;color:white;} .iBfTWj p{background-color:rgba(0,0,0,0) !important;font-size:1.75em !important;} .iBfTWj span{background-color:rgba(0,0,0,0) !important;font-size:1.75em !important;} .iBfTWj h1{font-size:4em !important;} @media (min-width:768px){.iBfTWj h1{font-size:2.75em !important;}.iBfTWj p{font-size:1.1em !important;}.iBfTWj span{font-size:1.1em !important;}}
/* sc-component-id: sc-bxivhb */
.dtehRz{font-size:2em;color:#ccc;}.dtehRz{font-size:2em;color:#ccc;}
...
<div class="sc-bxivhb dtehRz">

Notice how the original style is still there, but the server is now rendering the div with a different class name and style.

This behavior only occurs on a route, not at /, as the root renders correctly both server side and client side.

---

ReactJS.Net appears to be incorrectly rendering styles when the render happens on a route. I have created a sample app here. Sample App that duplicates this behvior.

Thank you, Steve