我已经创建了一个Next.js应用程序：

npx create-next-app@latest

字符串
我已经设置了这个包：

npm i -S @carbon/react

型
我用以下代码修改了app/globals.scss：

@use '@carbon/react';

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground: #000;
  --background-start: #222;
  --background-end: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground: #000;
    --background-start: #222;
    --background-end: #000;
  }
}

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  color: var(--foreground);
  background: linear-gradient(
      to bottom,
      transparent,
      var(--background-end)
    )
    var(--background-start);
}

型
我有这个Home页面：

export default function Home() {
  const [auth, setAuth] = useState<Auth | null>(null);
  return (
    <main className="flex flex-col items-center justify-center w-full h-full">
      {auth == null ? <SigIn setAuth={setAuth}/> : null}
    </main>
  )
}

型
这是我的SigIn组件：

export default function SigIn({setAuth}: SigInProps) {
  return (
    <Form aria-label="Sig in">
      <div className="flex flex-col gap-1">
        <TextInput required id="username" labelText="Username" inline maxLength={25}/>
        <TextInput required id="password" labelText="Password" inline type="password" maxLength={64}/>
        <Button>Sig in</Button>
      </div>
    </Form>
  );
}

型
当我运行npm run dev时，我希望输入标签在输入框的上方，按钮的背景是蓝色的。
Here's the IBM's storybook for Button .
我得到的是：

的数据