Styles not applied (Next.js)

[hydroper]

I've created a new Next.js application right now (automatic installation) and added this to the top of my app/globals.scss:

@use '@carbon/react';

I get this with a few components:

sigIn.tsx

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

I've asked here also: https://stackoverflow.com/q/77074024/19692949

[sheeehy]

you need to have installed the necessary Carbon packages. Also your SCSS import seems to be not correct for Carbon. For Carbon React components, use the following import in your globals.scss:

@import "~carbon-components/scss/globals/scss/styles.scss";

Also make sure you import the required components in your sigIn.tsx file.

[AlanGreene]

@sheeehy That's the legacy approach from v10 and earlier. For v11 when using the React components via @carbon/react the code in the original post is correct, the package contains everything needed so it would indeed be @use carbon/react in the SCSS: https://carbondesignsystem.com/developing/frameworks/react/#getting-started

@hydroper Can you reproduce this on https://stackblitz.com/ ?

Here's a template using Next.js: https://stackblitz.com/github/carbon-design-system/carbon/tree/main/examples/nextjs
edit: looks like you'll need to modify the @carbon/react version in package.json to 1.37.0 or earlier until 1.38 is published