SSR-rendered styles are overridden by incorrect styles with JS using gatsby ssr example

[farcaller]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

CSS renders the same both in SSR and JS modes.

Current Behavior

CSS renders correctly with JS being blocked but is overridden by incorrect one once JS loads.

Steps to Reproduce

No explicit steps to repro yet as I'm trying to make a minimal reproducible example.

The problem appears one I hook up the withRoot from the gatsby example. It fixes the SSR rendering, e.g. given the following (taken from material-ui-kit):

# assets/jss/material-kit-react.jsx
const title = {
  color: "#3C4858",
  margin: "1.75rem 0 0.875rem",
  textDecoration: "none",
  fontWeight: "700",
  fontFamily: `"Roboto Slab", "Times New Roman", serif`
};

# assets/jss/material-kit-react/views/landingPage.jsx
import { container, title } from "assets/jss/material-kit-react.jsx";

const landingPageStyle = {
  ...
  title: {
    ...title,
    display: "inline-block",
    position: "relative",
    marginTop: "30px",
    minHeight: "32px",
    color: "#FFFFFF",
    textDecoration: "none"
  }
  ...

# HeaderLayout.js
import indexPageStyle from 'assets/jss/material-kit-react/views/landingPage.jsx';
...
  <h1 className={classes.title}>{title}</h1>
...
export default withRoot(withStyles(indexPageStyle)(HeaderLayout));

The title style in the SSR page would resolve to the following:

.jss2 {
  color: #FFFFFF;
  margin: 1.75rem 0 0.875rem;
  display: inline-block;
  position: relative;
  margin-top: 30px;
  min-height: 32px;
  font-weight: 700;
  font-family: "Roboto Slab", "Times New Roman", serif;
  text-decoration: none;
}

which looks like an exact representation of the original style. However the JS-injected style is incorrect:

.jss2 {
  color: #3C4858;
  margin: 1.75rem 0 0.875rem;
  margin-top: 30px;
  min-height: 32px;
  font-weight: 700;
  font-family: "Roboto Slab", "Times New Roman", serif;
  margin-bottom: 1rem;
  text-decoration: none;
}

notice how it has the color from the material-kit-react.jsx, while still including other fields, e.g. margin-top.

To make sure this isn't an off-by-one I've added borderRadius: 515 to the landingPage.jsx style and borderRadius: 909 to its parent in material-kit-react.jsx (just random numbers). As I expected, the rendered JSS page has the 515 version and the JS one has 909.

I've started tracing this bug in https://github.com/cssinjs/react-jss/issues/306 but now I'm not sure it belongs there. More so, I have no idea where to start working on a minimal reproducible version of this as it goes against my knowledge of JS. Any hints?

Tech	Version
Material-UI	v3.3.1
React	v16.6.0

[farcaller]

... and then I carefully checked everything and found a place where a non-withRoot-decorated page was leaking.

[oliviertassinari]

@farcaller I'm happy you figured out the solution.