无法使用 Next JS 和 Chakra UI 在响应模式下正确设置导航栏

问题描述

我一直在尝试使用 Next JS 和 Chakra UI 构建一个网站，我想让它具有响应性。所以我使用了 react-responsive 包来做到这一点。我最初的目标是制作一个响应式导航栏。工作如下：

在桌面模式下，这是我期望的输出：

从亮模式到暗模式的切换完美无缺。对于移动模式，我想要一个汉堡包而不是导航栏，点击后会有一个 Drawer Chakra UI 元素来显示所有导航栏内容。

虽然所有这些都按预期实施，但似乎发生了一个小错误。每次在桌面模式下刷新页面时，我都会看到汉堡包图标而不是月亮图标。

这是我遇到的问题的快速演示

我附上了这部分对应的代码

导入包和赋值变量，我们关心的是isBigScreen

import { SunIcon,MoonIcon,HamburgerIcon } from '@chakra-ui/icons';
import { useMediaQuery } from 'react-responsive';


const { colorMode,toggleColorMode } = useColorMode();
const bg = useColorModeValue(navBgColor.light,navBgColor.dark);
const isBigScreen = useMediaQuery({ minWidth: 600 });
const { isOpen,onopen,onClose } = usedisclosure();

然后我返回一个 NavContainer，它本质上是一个带有一些配置的 Flex。

return (
        <NavContainer
            flexDirection="row"
            justifyContent="space-between"
            alignItems="center"
            maxWidth="900px"
            width="100%"
            bg={bg}
            as="nav"
            p={8}
            mt={[0,8]}
            mb={8}
            mx="auto"
        >
             .
             .
             .
        // Code inside this is mentioned below
             . 
             . 

        </NavContainer>
    );

这部分代码设置左侧的颜色切换器。这取自 react-responsive readme 中的示例代码

            {isBigScreen && (
                <IconButton
                    aria-label="toggle dark mode"
                    icon={colorMode == 'dark' ? <SunIcon /> : <MoonIcon />}
                    onClick={toggleColorMode}
                />
            )}

这是我认为导致问题的代码部分

这部分代码确保如果屏幕是桌面，则在图 1 和图 2 所示的同一行中显示带有链接（主页、关于、项目、博客）的导航栏，如果这不是在桌面中模式，然后显示一个汉堡包图标。

            {isBigScreen ? (
                    <Box>{LINKS.map(getLink)}</Box> 
                ) : (
                    <IconButton
                        aria-label="toggle ham"
                        icon={<HamburgerIcon />}
                        onClick={onopen}
                    />                    
                )}

这部分代码负责处理抽屉从左侧滑动的移动模式下的情况。这也很完美。

            <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
                <DrawerOverlay>
                    <DrawerContent>
                        <DrawerCloseButton />
                        <DrawerBody>
                            <Flex
                                direction="column"
                                justifyContent="center"
                                height="100%"
                                alignItems="center"
                            >
                                <IconButton
                                    BoxSize="50px"
                                    mb="6"
                                    aria-label="toggle dark mode"
                                    icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
                                    onClick={toggleColorMode}
                                />
                                {LINKS.map(getLink)}
                            </Flex>
                        </DrawerBody>
                    </DrawerContent>
                </DrawerOverlay>
            </Drawer>

如果需要进一步说明，我很乐意提供帮助。提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）