我使用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);
我完全按照文件来做。有办法解决吗?
1条答案
按热度按时间lymgl2op1#
问题出现在
next.config.js
文件中。我需要添加appDir: true;
标志。