我已经创建了一个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
.
我得到的是:
的数据
1条答案
按热度按时间kpbwa7wx1#
我也面临着同样的问题,我只是直接在根布局文件中导入
index.scss
文件,它就工作了。所以你可以使用下面的行字符串
在
app/layout.tsx
文件中,它将修复这个问题。希望它有帮助。