如何解决NextJS 快速刷新无法按预期工作
我正在使用 nextjs 和 Chakra UI 构建一个网站。我正在使用情感来设计我的导航。
导航组件代码如下:
import Link from "next/link";
import { Flex,List,ListItem } from "@chakra-ui/react";
import Image from "next/image";
import styled from "@emotion/styled";
const Nav = styled.nav`
position: sticky;
top: 20px;
z-index: 2;
`;
export default function StickyNav() {
return (
<Nav>
<Flex
bg='gray.100'
justifyContent='space-between'
p='8'
borderRadius='16'
>
<Image src='/vercel.svg' alt='Vercel logo' width={72} height={16} />
<List display='flex' ml='4'>
<ListItem mr='8'>
<Link href='#about'>
<a>About</a>
</Link>
</ListItem>
<ListItem mr='8'>
<Link href='#projects'>
<a>Projects</a>
</Link>
</ListItem>
<ListItem>
<Link href='#contact'>
<a>Contact</a>
</Link>
</ListItem>
</List>
</Flex>
</Nav>
);
}
我在快速刷新时遇到问题。当我启动开发服务器时,导航组件正确选择样式
const Nav = styled.nav`
position: sticky;
top: 20px;
z-index: 2;
`;
服务后,如果我尝试将顶部位置更改为 10px
,快速刷新不会反映这些更改。
快速刷新功能与其他组件完美配合,但仅此特定组件有问题。我浏览了几篇文章,但不确定是什么导致了这种行为。
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。