I've implemented Kuma.js as my CSS in JS solution for Next JS 13. I'm currently working on styling a Header component called HeaderWrapper using Kuma. Below is the code snippet:
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>
);
}
The code runs without any errors, but it doesn't apply the intended styles. Inspecting elements in Firefox Developer Edition reveals that a class name is indeed added to the header:
<header class="kuma-3224476256">
<h1>Welcome</h1>
</header>
However, this class kuma-3224476256 has no associated properties.
Furthermore, 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 instructions provided in the documentation diligently. Is there a solution to resolve this issue?