Merge pull request #426 from Giphy/fix/ssr-hyrdation-warning-in-style…

…d-components ssr: fix styled components hydration warning
Giphy · Dec 11, 2023 · d581071 · d581071
2 parents 4e43654 + 30ccd9f
commit d581071
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/hip-monkeys-notice.md b/.changeset/hip-monkeys-notice.md
@@ -0,0 +1,5 @@
+---
+'@giphy/react-components': patch
+---
+
+fix ssr hydration warning in styled component
diff --git a/packages/react-components/src/components/search-bar/search-button.tsx b/packages/react-components/src/components/search-bar/search-button.tsx
@@ -121,11 +121,11 @@ const SearchButton = ({ onClick }: Props) => {
     const throttledFetch = useThrottle(isFetching, 1000)
     return (
         <Container onClick={() => onClick?.()}>
-            <GradientBox />
+            <GradientBox suppressHydrationWarning />
             <SearchIcon />
             {throttledFetch && (
-                <Fx>
-                    <Scanner />
+                <Fx suppressHydrationWarning>
+                    <Scanner suppressHydrationWarning />
                 </Fx>
             )}
         </Container>