diff --git a/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js b/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js
index 837e62479801b..f6de5c84dfe62 100644
--- a/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js
@@ -1,13 +1,18 @@
 import React from "react"
 import { ServerStyleSheet, StyleSheetManager } from "styled-components"
 
-const sheet = new ServerStyleSheet()
+const sheetByPathname = {}
 
 // eslint-disable-next-line react/prop-types,react/display-name
-exports.wrapRootElement = ({ element }) => (
-  <StyleSheetManager sheet={sheet.instance}>{element}</StyleSheetManager>
-)
+exports.wrapRootElement = ({ element, pathname }) => {
+  const sheet = (sheetByPathname[pathname] = new ServerStyleSheet())
+  return <StyleSheetManager sheet={sheet.instance}>{element}</StyleSheetManager>
+}
+
+exports.onRenderBody = ({ setHeadComponents, pathname }) => {
+  if (!sheetByPathname[pathname]) {
+    sheetByPathname[pathname] = new ServerStyleSheet()
+  }
 
-exports.onRenderBody = ({ setHeadComponents }) => {
-  setHeadComponents([sheet.getStyleElement()])
+  setHeadComponents([sheetByPathname[pathname].getStyleElement()])
 }