Typescript 将带有样式的Reaction组件导入到Pages文件夹时不起作用

我的Components文件夹中有一个带有样式的组件:

// import Link from "next/link";
import {Link} from "react-scroll"
export default function Navbar() {
  return (
    <div className="fixed w-full h-[79px] flex justify-between items-center px-4 bg-[#0a192f] text-gray-300">
      <div>
        <h1 className=" font-thin text-2xl italic font-serif">John Doe</h1>
      </div>
      {/* menu */}
      <ul className="hidden md:flex gap-x-8">
        <li>
          <Link smooth={true} duration={500} to="">Home</Link>
        </li>
        <li> 
          <Link smooth={true} duration={500} to="/about">About</Link>
        </li>
        <li>
          <Link smooth={true} duration={500} to="/skills">Skills</Link>
        </li>
        <li>
          <Link smooth={true} duration={500} to="/cv">Work</Link>
        </li>
        <li>
          <Link smooth={true} duration={500} to="/projects">Projects</Link>
        </li>
        <li>
          <Link smooth={true} duration={500} to="/contact">Contact</Link>
        </li>
      </ul>
    </div>
  );
}

当我试图将该组件导入到我的pages文件夹并使用它时，没有任何样式加载，但组件加载了.所以我会看到:约翰多伊，家，关于，技能等，但不是造型apply.

请让我知道，如果我误解了什么或做造型的错误方式.