Kuma CSS in JS library applies a class but with no effect

Question

I'm using Kuma.js as my CSS in JS solution for Next JS 13. I'm trying to create a styled Header component using Kuma called HeaderWrapper. Here's my code:

import { styled } from "@kuma-ui/core";

const HeaderWrapper = styled("header")`
    color: red;
    background-color: blue;
`;

export default function Header() {
    return (
        <HeaderWrapper>
            <h1> Welcome </h1>
        </HeaderWrapper>
    );
}

This code produces no error messages. However, it doesn't actually style anything. Using Firefox Developer Edition I can see via inspect element that a class name is being applied. Here's that:

<header class="kuma-3224476256">
  <h1>Welcome</h1>
</header>

But the class kuma-3224476256 does not have any properties attached to it.

Here's my next.config.js file:

const { withKumaUI } = require("@kuma-ui/next-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = withKumaUI(nextConfig);

I have followed the documentation exactly. Is there a way to fix this?

Answer 1

The problem was in the next.config.js file. I needed to add the appDir: true; flag.

const { withKumaUI } = require("@kuma-ui/next-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true
  }
};

module.exports = withKumaUI(nextConfig);