小编Ros*_*lia的帖子

我在 Next JS 项目中使用了 Chakra UI 中的按钮组件。我使用了实体按钮变体，但它的背景颜色会消失，只有在我将其悬停后才显示。我尝试了其他变体，效果很好。

这就是我使用组件的方式。

"use client";

import { Button } from "@chakra-ui/react";
import { ArrowForwardIcon } from "@chakra-ui/icons";

export function Nav({ children }) {
  return (
    <div className="flex">
        <Button colorScheme="green" variant="outline">Masuk</Button>
        <Button colorScheme="green" variant="solid" rightIcon={<ArrowForwardIcon />}>
          Daftar
        </Button>
    </div>
  );
}

我已经在我的文件中设置了提供程序layout.js。我还尝试通过道具手动定义背景颜色，但它也消失了。我认为这是由我的顺风设置引起的，但我使用 Next.js 安装中的默认设置，只是将 HTML 背景颜色更改为globals.css白色。

这是我的layout.js。

import "@styles/globals.css";
import { Inter } from "next/font/google";
import { Providers } from "@components/Providers";

const inter = Inter({ subsets: ["latin"] });

export default …