This issue occurs when a component created with createGlobalStyle is dynamic (e.g. through props) and more than one instance of the component may be mounted simultaneously.

What seems to happen, as far as I understand it, is this:

1. Instance 1 is mounted, injecting the appropriate CSS
2. Instance 2 is mounted, updating the CSS in question to reflect its own props
3. Instance 2 is unmounted, but the CSS remains unchanged.

Environment

System:

• OS: macOS Mojave 10.14.6
• CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
• Memory: 123.61 MB / 16.00 GB
• Shell: 3.0.2 - /usr/local/bin/fish

Binaries:

• Node: 10.16.3 - ~/.config/nvm/10.16.3/bin/node
• Yarn: 1.17.3 - ~/.config/nvm/10.16.3/bin/yarn
• npm: 6.9.0 - ~/.config/nvm/10.16.3/bin/npm

npmPackages:

• babel-plugin-styled-components: ^1.10.0 => 1.10.1
• styled-components: ^5.0.0-beta.9 => 5.0.0-beta.8-groupsizefix

Reproduction

https://codesandbox.io/embed/style-with-styled-components-kvsrk

Steps to reproduce

In the codesandbox above, check the checkbox and uncheck it again.

Expected Behavior

When the checkbox is unchecked, the background should go back to white.

Actual Behavior

The background remains yellow as the styles from the unmounted component are kept around.