fix: styled pass through props changed in v6 (#904)

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",

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;