@chakra-ui/熊猫预设
熊猫 CSS 预设的镜像 查克拉乌伊 默认主题( kens, 语义) 颜色、食谱、档位食谱和全局风格),这样你就可以用 熊猫 同时保留了Chakra相通的设计符号.
安装
pnpm add @chakra-ui/panda-preset
# or
npm install @chakra-ui/panda-preset
同行期望: @pandacss/dev (和您的应用程序的回放/ Vite/ 下一步设置为
熊猫的老样子.
配置熊猫
panda.config.ts (或 .js:
import { defineConfig } from "@pandacss/dev"
export default defineConfig({
presets: ["@chakra-ui/panda-preset"],
preflight: true,
include: ["./src/**/*.{js,jsx,ts,tsx}"],
outdir: "styled-system", // default; change if you prefer another folder
})
然后生成运行时间 :
pnpm exec panda codegen
在您的应用程序中, 导入 CSS 层 Panda 发送( 例如生成)
styled-system/styles.css 或您自己的条目,符合熊猫的地层设置)
和使用情况 css(), (中文(简体) ), 食谱,以及 模式 从你的 outdir 和任何其他一样
熊猫计划.
颜色模式( 浅/ 暗)
此预设用途中的语义符号 _light 财务报告和审定财务报表 _dark (例如颜色,
(原始内容存档于2013-10-12). shadows. 要正确应用这些值,文档根应带有
类 选择活动颜色模式:
- 设定
class="light"或者说class="dark"打开<html>(或另一个) 组合元素的设置用途).
示例
<html class="light">
<!-- ... -->
</html>
没有其中一类,轻/暗依赖的符号可能无法解决 以你所期待的方式.
下一个.js和 next-themes
与 下一个主题,使用时
attribute="class" 因此活动主题被反映为 light 编号 : dark 打开
<html>,匹配熊猫 _light 编号 : _dark 语义符号.
defaultTheme 编号 : enableSystem 取决于您的产品默认值.
// e.g. app/providers.tsx — mark as a Client Component in the App Router
"use client"
import { ThemeProvider } from "next-themes"
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
)
}
// e.g. app/layout.tsx — wrap the app; suppressHydrationWarning avoids a class mismatch warning on <html>
import { Providers } from "./providers"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}
安装 : pnpm add next-themes。 。 。 .