个人中心
gpt4 book ai didi

@carbon/react with Next.js 13 has anormal styles(@carbon/react with Next.js 13具有正常的样式)

转载 作者：bug小助手 更新时间：2023-10-27 19:47:04 33 4
gpt4 key购买 nike



I've created a Next.js application with:

我已经创建了一个Next.js应用程序，其中包含：


npx create-next-app@latest

I've setup the package with:

我已经使用以下选项设置了包：


npm i -S @carbon/react

I've modified app/globals.scss with this code:

我已经使用以下代码修改了app/lobals.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);
}

I've this Home page:

我有这个主页：


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>
  )
}

This is my SigIn component:

这是我的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>
  );
}

When I run npm run dev, I expected the input labels to be above the input boxes and the button to have a blue background. Other styles of the Carbon Design System look fine.

当我运行npm run dev时，我希望输入标签位于输入框的上方，并且按钮具有蓝色背景。其他风格的碳设计系统看起来还不错。


Here's the IBM's storybook for Button.

以下是IBM为巴顿编写的故事书。


Here's what I get:

以下是我得到的信息：


Picture 1


更多回答
优秀答案推荐
更多回答

33 4 0
文章推荐： What is the Record type and How and when to use it in dart?(记录类型是什么，在DART中如何使用以及何时使用？)
文章推荐： How to trigger onAppear when returning from fullScreenCover(如何在从FullScreenCover返回时触发onspecar)
文章推荐： NestJS - appService instantiation problems when using dynamic providers with useFactory()(将动态提供程序与useFactory()一起使用时的NestJS-appService实例化问题)
文章推荐： Why are values inside list changing (Python) [duplicate](为什么列表中的值正在更改(Python)[重复])
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com