fix hydration warning
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import { useAuth } from "@/contexts/auth-context";
|
import { useAuth } from "@/contexts/auth-context";
|
||||||
import { createTheme, MantineProvider as MantineProviderCore } from "@mantine/core";
|
import { createTheme, MantineProvider as MantineProviderCore } from "@mantine/core";
|
||||||
import ColorSchemeProvider from "./color-scheme-provider";
|
import ColorSchemeProvider from "./color-scheme-provider";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
const commonInputStyles = {
|
const commonInputStyles = {
|
||||||
label: {
|
label: {
|
||||||
@@ -45,10 +46,18 @@ const theme = createTheme({
|
|||||||
|
|
||||||
const MantineProvider = ({ children }: { children: React.ReactNode }) => {
|
const MantineProvider = ({ children }: { children: React.ReactNode }) => {
|
||||||
const { metadata } = useAuth()
|
const { metadata } = useAuth()
|
||||||
|
const [isHydrated, setIsHydrated] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsHydrated(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const colorScheme = isHydrated ? (metadata.colorScheme || 'auto') : 'auto'
|
||||||
|
const primaryColor = isHydrated ? (metadata.accentColor || 'blue') : 'blue'
|
||||||
|
|
||||||
return <MantineProviderCore
|
return <MantineProviderCore
|
||||||
defaultColorScheme={metadata.colorScheme || 'auto'}
|
defaultColorScheme={colorScheme}
|
||||||
theme={{ ...theme, primaryColor: metadata.accentColor || 'blue' }}
|
theme={{ ...theme, primaryColor }}
|
||||||
>
|
>
|
||||||
<ColorSchemeProvider>
|
<ColorSchemeProvider>
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
Reference in New Issue
Block a user