我正在用 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
为快速刷新并不会反映这些更改。
快速刷新功能与其他组件完美配合,但仅在此特定组件上存在问题。我浏览了几篇文章,但不确定是什么导致了这种行为。