themeing and providers via emotion

README.md

@@ -18,5 +18,5 @@ On top of this, if we remove the suspense boundary, all the errors dissapear. So
 
 ## What is the fix?
 
-I noticed that if I wrap the `ChakraProvider` inside an emotion `CacheProvider` it solves the issue (see `layout.tsx`). BUT, that has some additional side-effects, and when trying the same method in other apps with actual components and logic, it produces FOUTs...
+I noticed that if I wrap the `ThemeProvider` inside an emotion `CacheProvider` it solves the issue (see `layout.tsx`). BUT, that has some additional side-effects, and when trying the same method in other apps with actual components and logic, it produces FOUTs...
 

package.json

@@ -10,8 +10,6 @@
     "build-and-start": "next build && next start"
   },
   "dependencies": {
-    "@chakra-ui/next-js": "^2.4.2",
-    "@chakra-ui/react": "^2.10.3",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "framer-motion": "^11.11.11",

src/app/components/ButtonsList/ButtonsList.tsx

@@ -1,12 +1,15 @@
 "use client";
 
+import { useTheme } from "@emotion/react";
+
 const ButtonsList = ({ names }: { names: string[] }) => {
+  const theme = useTheme();
   return (
     <div className="flex gap-4">
       {names.map(name => (
         <div key={name}>
           <button style={{
-            background: "purple",
+            background: theme.colors.primary,
             color: "#fff",
             padding: "0.5rem"
           }} onClick={() => console.log(name)}>

src/app/components/EmotionButtonsList/EmotionButtonsList.tsx

@@ -16,8 +16,9 @@ const EmotionButtonsList = ({ names }: { names: string[] }) => {
   )
 }
 
+
 const EmotionButton = styled.button`
-    background: purple;
+    background: ${(props) => props.theme.colors.primary};
     color: #fff;
     padding: 0.5rem;
 `;

src/app/providers.tsx

@@ -2,22 +2,22 @@
 'use client'
 
 import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
+import { CacheProvider, ThemeProvider } from '@emotion/react';
+import { theme } from './theme';
 
-import { ChakraProvider } from '@chakra-ui/react'
 
 const cache = createCache({ key: 'css' });
 
 function RegularProviders({ children }: { children: React.ReactNode }) {
   return (
-    <ChakraProvider>{children}</ChakraProvider>
+    <ThemeProvider theme={theme}>{children}</ThemeProvider>
   )
 }
 
 function WithCacheProviders({ children }: { children: React.ReactNode }) {
   return (
     <CacheProvider value={cache}>
-      <ChakraProvider>{children}</ChakraProvider>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
     </CacheProvider>
   )
 }

src/app/theme.ts

@@ -0,0 +1,8 @@
+// Just add a theme, not used actually.
+const theme = {
+  colors: {
+    primary: "purple",
+  },
+};
+
+export { theme };

src/emotion.d.ts

@@ -0,0 +1,9 @@
+import '@emotion/react'
+
+declare module '@emotion/react' {
+  export interface Theme {
+    colors: {
+      primary: string
+    }
+  }
+}