Here's what I did to set up my Next.js application:
npx create-next-app@latest
I then installed the necessary package using:
npm i -S @carbon/react
The global styles in app/globals.scss were customized with this code snippet:
@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);
}
Furthermore, I have created a page named Home, which looks like this:
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 how my SigIn component is structured:
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>
);
}
After running npm run dev, I expected the input labels to be positioned above the input boxes and the button to have a blue background. The styles from the Carbon Design System are displaying correctly except for these specific elements.
For more about the Button, check IBM's storybook here.
However, the actual result I see is different from my expectations: