@carbon/react with Next.js 13 has anormal styles

Question

I've created a Next.js application with:

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:

@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:

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.

Here's the IBM's storybook for Button.

Here's what I get:

Answer 1

I was facing the same issue, I just imported the index.scss file directly in root layout file and it worked. So you can just use the following line

import '@carbon/react/index.scss'

inside the app/layout.tsx file which will fix the issue. Hope it helps.