laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix hydration error (#3542)

Browse Source
This commit is contained in:
Thomas Brandého 2024-06-21 21:34:47 +02:00 committed by GitHub
parent 1a74ff4d45
commit 046dbdef63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
reflex/.templates/web/components/reflex/chakra_color_mode_provider.js
View File

@ -6,12 +6,13 @@ import { ColorModeContext, defaultColorMode } from "/utils/context.js";
export default function ChakraColorModeProvider({ children }) { export default function ChakraColorModeProvider({ children }) {
const { theme, resolvedTheme, setTheme } = useTheme(); const { theme, resolvedTheme, setTheme } = useTheme();
const { colorMode, toggleColorMode } = chakraUseColorMode(); const { colorMode, toggleColorMode } = chakraUseColorMode();
const [resolvedColorMode, setResolvedColorMode] = useState(theme); const [resolvedColorMode, setResolvedColorMode] = useState(colorMode);
useEffect(() => { useEffect(() => {
if (colorMode != resolvedTheme) { if (colorMode != resolvedTheme) {
toggleColorMode(); toggleColorMode();
} }
setResolvedColorMode(resolvedTheme);
}, [theme, resolvedTheme]); }, [theme, resolvedTheme]);
const rawColorMode = colorMode; const rawColorMode = colorMode;

2
reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js
View File

@ -5,7 +5,7 @@ import { ColorModeContext, defaultColorMode } from "/utils/context.js";
export default function RadixThemesColorModeProvider({ children }) { export default function RadixThemesColorModeProvider({ children }) {
const { theme, resolvedTheme, setTheme } = useTheme(); const { theme, resolvedTheme, setTheme } = useTheme();
const [rawColorMode, setRawColorMode] = useState(defaultColorMode); const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
const [resolvedColorMode, setResolvedColorMode] = useState(theme); const [resolvedColorMode, setResolvedColorMode] = useState("dark");
useEffect(() => { useEffect(() => {
setRawColorMode(theme); setRawColorMode(theme);

10
reflex/components/radix/themes/color_mode.py
View File

@ -25,7 +25,13 @@ from reflex.components.core.cond import Cond, color_mode_cond, cond
from reflex.components.lucide.icon import Icon from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.components.dropdown_menu import dropdown_menu from reflex.components.radix.themes.components.dropdown_menu import dropdown_menu
from reflex.components.radix.themes.components.switch import Switch from reflex.components.radix.themes.components.switch import Switch
from reflex.style import LIGHT_COLOR_MODE, color_mode, set_color_mode, toggle_color_mode from reflex.style import (
LIGHT_COLOR_MODE,
color_mode,
resolved_color_mode,
set_color_mode,
toggle_color_mode,
)
from reflex.utils import console from reflex.utils import console
from reflex.vars import BaseVar, Var from reflex.vars import BaseVar, Var
@ -183,7 +189,7 @@ class ColorModeSwitch(Switch):
""" """
return Switch.create( return Switch.create(
*children, *children,
checked=color_mode != LIGHT_COLOR_MODE, checked=resolved_color_mode != LIGHT_COLOR_MODE,
on_change=toggle_color_mode, on_change=toggle_color_mode,
**props, **props,
) )

8
reflex/components/radix/themes/color_mode.pyi
View File

@ -14,7 +14,13 @@ from reflex.components.core.cond import Cond, color_mode_cond, cond
from reflex.components.lucide.icon import Icon from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.components.dropdown_menu import dropdown_menu from reflex.components.radix.themes.components.dropdown_menu import dropdown_menu
from reflex.components.radix.themes.components.switch import Switch from reflex.components.radix.themes.components.switch import Switch
from reflex.style import LIGHT_COLOR_MODE, color_mode, set_color_mode, toggle_color_mode from reflex.style import (
LIGHT_COLOR_MODE,
color_mode,
resolved_color_mode,
set_color_mode,
toggle_color_mode,
)
from reflex.utils import console from reflex.utils import console
from reflex.vars import BaseVar, Var from reflex.vars import BaseVar, Var
from .components.icon_button import IconButton from .components.icon_button import IconButton