wontondon · November 2, 2022 18:52
diff --git a/context-providers.tsx b/context-providers.tsx
 'use client';

 import React, { useState } from 'react';
 import { ChakraProvider } from '@chakra-ui/react';
 import { theme } from './theme';

 export default function ContextProviders({
  children,
 }: {
  children: React.ReactNode;
 }) {

  return (
    <ChakraProvider theme={theme}>
        {children}
    </ChakraProvider>
  );
 }
diff --git a/layout.tsx b/layout.tsx
 import ContextProviders from './context-providers';

 export default function RootLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
  return (
    <html lang="en">
      <head>
        <title>Example</title>
      </head>
      <body>
        <ContextProviders>{children}</ContextProviders>
      </body>
    </html>
  );
 }
diff --git a/page.tsx b/page.tsx
 'use client';

 import { Box } from '@chakra-ui/react';

 export default function Home() {
  return <Box bg="red.100">Example</Box>;
 }
	import ContextProviders from './context-providers';

	export default function RootLayout({
	children,
	}: {
	children: React.ReactNode;
	}) {
	return (
	<html lang="en">
	<head>
	<title>Example</title>
	</head>
	<body>
	<ContextProviders>{children}</ContextProviders>
	</body>
	</html>
	);
	}
	'use client';

	import { Box } from '@chakra-ui/react';

	export default function Home() {
	return <Box bg="red.100">Example</Box>;
	}