HeroUI组件在Next.js环境下无法加载CSS样式的问题求助

嘿，各位大佬，我最近在做学校项目的时候碰到了个搞不定的问题，想请大家帮忙分析下！

先说说背景：我用Next.js搭项目，选了HeroUI作为组件库，之前想着把Tailwind升级到v4，也按照指引做了配置修改。现在运行网站的时候，全局CSS和普通的Tailwind类都能正常生效，但一到/login页面，导入HeroUI的组件（比如Input）就完全没样式，自己写的自定义组件（Container、Text）倒是正常渲染。

给大家看看我的Login.tsx代码：

import { Container } from "@/components/container";
import { Text } from "@/components/text";
import { Input } from "@heroui/react";

export default function Login() {
  return (
    <Container className="flex min-h-[calc(100vh-140px)] items-center justify-center py-8">
      <div className="w-full max-w-md space-y-6 rounded-lg border p-8 shadow-sm">
        <Text as="h1" size="heading-4" className="text-center">
          Iniciar sesión
        </Text>
        <Input />
        <Text as="p" className="text-center">
          ¿No tienes cuenta?{" "}
          <a href="/register" className="text-primary underline">
            Regístrate
          </a>
        </Text>
      </div>
    </Container>
  );
}

下面是我的几个配置文件：

postcss.config.js #

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

tsconfig.json #

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "ES2017"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "tailwind.config.js",
    "./src/*"
  ],
  "exclude": ["node_modules"]
}

next.config.js #

const removeImports = require("next-remove-imports")();

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  pageExtensions: ["ts", "tsx", "mdx", "md"],
  experimental: {
    mdxRs: true,
  },
};

module.exports = removeImports(nextConfig);

global.css #

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1a1a1a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

现在的情况是，页面里的标题、容器、链接这些都有正常的样式，唯独HeroUI的Input组件就是个没有任何样式的原生输入框，完全没渲染出HeroUI应该有的样式。我实在找不到问题出在哪了，有没有大佬能给点思路或者解决方案呀？万分感谢！😢

内容来源于stack exchange