[Gatsby+MUI] SSR issue using @mui/styled-engine-sc

Title is pretty much all there is. Some really weird bugs happened on my home page after I switched a

node to a node in a different page.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Home page loads fine, but clicking into /blog and then back causes the CSS to be all messed up.

However, if you load into /blog first, everything is fine even after switching back and forth multiple times.

Expected Behavior 🤔

CSS should not be messed up.

Steps to Reproduce 🕹

Steps:

1. Check out https://github.com/fterh/fabianterh.me/tree/weird-mui
2. gatsby build && gatsby serve
3. Home page loads fine, clicking into /blog and back works
4. git reset --mixed HEAD~
5. gatsby build && gatsby serve
6. Home page loads fine, clicking into /blog and back reproduces described bug
7. See the last commit - last commit isolates the buggy change

Context 🔦

Build a personal website

Your Environment 🌎

System:
    OS: macOS 11.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 25.10 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm
  Managers:
    Homebrew: 3.2.14 - /usr/local/bin/brew
    pip3: 21.2.4 - /usr/local/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.33.0 - /usr/local/bin/git
    Clang: 12.0.0 - /usr/bin/clang
  Servers:
    Apache: 2.4.46 - /usr/sbin/apachectl
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.60.2 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: javac 17 - /usr/bin/javac
    Perl: 5.28.2 - /usr/bin/perl
    PHP: 7.3.22 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.9.7 - /usr/local/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    SQLite: 3.32.3 - /usr/bin/sqlite3
  Browsers:
    Chrome: 94.0.4606.81
    Firefox: 92.0.1
    Safari: 14.0.1

Start by checking out the linked weird-mui branch and running gatsby build && gatsby serve. Compare behavior before and after the last commit, then reproduce the navigation sequence between the home page and /blog involving Typography and @mui/styled-engine-sc. Done means the CSS remains correct when navigating back and forth after the isolated change.