next.js JS库中的Kuma CSS应用了一个类但没有效果

yrwegjxp  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(103)

我使用Kuma.js作为我的CSS在JS解决方案为Next JS 13。我试图使用Kuma创建一个名为HeaderWrapper的样式化的Header组件。下面是我的代码:

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

此代码不会产生错误消息。然而,它实际上并没有什么风格。使用Firefox Developer Edition,我可以通过inspect元素看到正在应用的类名。是这样的

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

但是类kuma-3224476256没有附加任何属性。
下面是我的next.config.js文件:

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

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

module.exports = withKumaUI(nextConfig);

我完全按照文件来做。有办法解决吗?

lymgl2op

lymgl2op1#

问题出现在next.config.js文件中。我需要添加appDir: true;标志。

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

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

module.exports = withKumaUI(nextConfig);

相关问题