javascript @carbon/react with Next.js 13具有正常的样式

pgx2nnw8  于 11个月前  发布在  Java
关注(0)|答案(1)|浏览(203)

我已经创建了一个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 .
我得到的是:


的数据

kpbwa7wx

kpbwa7wx1#

我也面临着同样的问题,我只是直接在根布局文件中导入index.scss文件,它就工作了。所以你可以使用下面的行

import '@carbon/react/index.scss'

字符串
app/layout.tsx文件中,它将修复这个问题。希望它有帮助。

相关问题