From e6e2c5c638e02212feed297de06bf73ca48510f0 Mon Sep 17 00:00:00 2001
From: tyleroooo <tyler@dydx.exchange>
Date: Thu, 8 Aug 2024 18:05:53 -0400
Subject: [PATCH] fix: styled pass through props changed in v6 (#904)

---
 package.json   |  1 +
 pnpm-lock.yaml | 21 ++++++++++++++-------
 src/App.tsx    | 14 +++++++++++++-
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 61fc8e2fc..ee61ba59b 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "@dydxprotocol/v4-abacus": "1.8.80",
     "@dydxprotocol/v4-client-js": "^1.1.27",
     "@dydxprotocol/v4-localization": "^1.1.170",
+    "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",
     "@hugocxl/react-to-image": "^0.0.9",
     "@js-joda/core": "^5.5.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03df696aa..ba9d16e38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   '@dydxprotocol/v4-localization':
     specifier: ^1.1.170
     version: 1.1.170
+  '@emotion/is-prop-valid':
+    specifier: ^1.3.0
+    version: 1.3.0
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -3264,20 +3267,24 @@ packages:
     dependencies:
       protobufjs: 6.11.4
 
-  /@emotion/is-prop-valid@1.2.1:
-    resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
-    dependencies:
-      '@emotion/memoize': 0.8.1
-    dev: false
-
   /@emotion/is-prop-valid@1.2.2:
     resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==}
     dependencies:
       '@emotion/memoize': 0.8.1
 
+  /@emotion/is-prop-valid@1.3.0:
+    resolution: {integrity: sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==}
+    dependencies:
+      '@emotion/memoize': 0.9.0
+    dev: false
+
   /@emotion/memoize@0.8.1:
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
 
+  /@emotion/memoize@0.9.0:
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+    dev: false
+
   /@emotion/stylis@0.8.5:
     resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==}
     dev: false
@@ -22780,7 +22787,7 @@ packages:
     dependencies:
       '@babel/helper-module-imports': 7.22.15
       '@babel/traverse': 7.23.9(supports-color@5.5.0)
-      '@emotion/is-prop-valid': 1.2.1
+      '@emotion/is-prop-valid': 1.3.0
       '@emotion/stylis': 0.8.5
       '@emotion/unitless': 0.7.5
       babel-plugin-styled-components: 2.1.4(@babel/core@7.23.9)(styled-components@5.3.11)
diff --git a/src/App.tsx b/src/App.tsx
index 556e84f35..1b7f7874b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,12 @@
 import { lazy, Suspense, useMemo } from 'react';
 
+import isPropValid from '@emotion/is-prop-valid';
 import { PrivyProvider } from '@privy-io/react-auth';
 import { WagmiProvider } from '@privy-io/wagmi';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { GrazProvider } from 'graz';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
-import styled, { css } from 'styled-components';
+import styled, { css, StyleSheetManager, WebTarget } from 'styled-components';
 
 import { AppRoute, DEFAULT_TRADE_ROUTE, MarketsRoute } from '@/constants/routes';
 
@@ -176,6 +177,7 @@ const providers = [
   wrapProvider(NotificationsProvider),
   wrapProvider(DialogAreaProvider),
   wrapProvider(PotentialMarketsProvider),
+  wrapProvider(StyleSheetManager, { shouldForwardProp }),
   wrapProvider(AppThemeAndColorModeProvider),
 ];
 
@@ -188,6 +190,16 @@ const App = () => {
   );
 };
 
+// This implements the default behavior from styled-components v5
+function shouldForwardProp(propName: string, target: WebTarget): boolean {
+  if (typeof target === 'string') {
+    // For HTML elements, forward the prop if it is a valid HTML attribute
+    return isPropValid(propName);
+  }
+  // For other elements, forward all props
+  return true;
+}
+
 const $Content = styled.div<{
   isShowingHeader: boolean;
   isShowingFooter: boolean;