Chakra UI 实体按钮的背景颜色消失
Ros*_*lia 4 frontend reactjs next.js tailwind-css chakra-ui
我在 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 function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</html>
);
}
我把提供者放在这里。
"use client";
import { CacheProvider } from "@chakra-ui/next-js";
import { ChakraProvider } from "@chakra-ui/react";
export function Providers({ children }) {
return (
<CacheProvider>
<ChakraProvider>{children}</ChakraProvider>
</CacheProvider>
);
}
我使用 chakra-ui/next-js 版本。2.1.4 和下一个版本。13.4.4
我应该怎么办？我很困惑，因为我是 Next 的新手。Node.js 和 Chakra UI。谢谢
这是因为 Tailwind 通过preflight重置了 CSS 。您可以在此处找到整个重置文件，这是使 Chakra UI 按钮消失的代码块：
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
您可以只使用 Tailwind 类来为按钮着色，但如果您想使用 Charka UI 的colorScheme属性，则必须禁用中的预检值tailwind.config.js
// tailwind.config.js
module.exports = {
// ...other config
corePlugins: {
preflight: false,
}
}
但请记住，如果您这样做，您将禁用所有重置的 CSS 属性，这只有在您有另一个样式系统（例如 Chakra UI）时才有用。
我也同意您帖子中的评论，即您可能不需要同时使用 TailwindCSS 和 Chakra UI，因为它们太大了。
| 归档时间： |
|
| 查看次数： |
1414 次 |
| 最近记录： |