diff --git a/docs/pages/components/autocomplete.js b/docs/pages/components/autocomplete.js
index f623129a999fb8..3e5300b9a4e3f5 100644
--- a/docs/pages/components/autocomplete.js
+++ b/docs/pages/components/autocomplete.js
@@ -10,6 +10,10 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
 // eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
diff --git a/docs/pages/guides/interoperability.js b/docs/pages/guides/interoperability.js
index b855c36544b4ae..13b44558e933b8 100644
--- a/docs/pages/guides/interoperability.js
+++ b/docs/pages/guides/interoperability.js
@@ -10,6 +10,10 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
 // eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
diff --git a/docs/pages/styles/advanced.js b/docs/pages/styles/advanced.js
index 5b09ab3c335257..7f29c031a78cc5 100644
--- a/docs/pages/styles/advanced.js
+++ b/docs/pages/styles/advanced.js
@@ -10,6 +10,10 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
 // eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
diff --git a/docs/pages/system/basics.js b/docs/pages/system/basics.js
index cee5eb1f74e01b..fc08d98b653fae 100644
--- a/docs/pages/system/basics.js
+++ b/docs/pages/system/basics.js
@@ -10,6 +10,10 @@ const requireRaw = require.context(
   /\.(js|md|tsx)$/,
 );
 
+// Run styled-components ref logic
+// https://github.com/styled-components/styled-components/pull/2998
+requireDemo.keys().map(requireDemo);
+
 // eslint-disable-next-line react/prop-types
 export default function Page({ demos, docs }) {
   return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;