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