我的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文件夹并使用它时，没有样式加载，但组件加载了。所以我会看到：John Doe，home，about，skills等，但没有应用样式。
请让我知道，如果我误解了什么或做造型的错误方式。