NextJS 快速刷新未按预期工作

Question

我正在使用 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快速刷新，则不会反映这些更改。

快速刷新功能与其他组件完美配合，但仅与该特定组件存在问题。我已经浏览了几篇文章，但不确定是什么导致了这种行为。

Answer 1

检查文件名或文件夹名不是以大写字母开头

快速刷新不起作用：

快速刷新工作：

Answer 2

还要检查您的导入语句是否具有正确的大小写。

import Box from '../Components/box';

与

import Box from '../Components/Box';