# @chakra-ui/panda-preset 中文文档

规范地址：https://npmcn.com/package/%40chakra-ui/panda-preset/

版本：3\.38\.0
npm 元数据更新时间：2026-11-03T15:59:54.899Z
中文译文更新时间：2026-11-09T13:18:41.604Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40chakra-ui/panda-preset
原文对照：https://npmcn.com/package/%40chakra-ui/panda-preset/?lang=original
项目主页：https://chakra-ui.com/
源码仓库：https://github.com/chakra-ui/chakra-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：669 kB，331 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2025-01-09T16:20:01.174Z
- 最新版本发布：2026-11-03T15:59:54.647Z
- 近 30 天下载量：2573（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：54（近 12 个月 10 个）

## 中文简介

Chakra UI的熊猫预设

## 安装

```sh
npm install @chakra-ui/panda-preset
```

也可以使用：`pnpm add @chakra-ui/panda-preset`、`yarn add @chakra-ui/panda-preset`、`bun add @chakra-ui/panda-preset`

## README

# @chakra-ui/熊猫预设

熊猫 CSS 预设的镜像 **查克拉乌伊** 默认主题( kens, 语义) 颜色、食谱、档位食谱和全局风格),这样你就可以用 **熊猫** 同时保留了Chakra相通的设计符号.

## 安装

```bash
pnpm add @chakra-ui/panda-preset
# or
npm install @chakra-ui/panda-preset
```

同行期望: **`@pandacss/dev`** (和您的应用程序的回放/ Vite/ 下一步设置为 熊猫的老样子.

## 配置熊猫

**`panda.config.ts`** (或 `.js`:

```ts
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
})
```

然后生成运行时间 :

```bash
pnpm exec panda codegen
```

在您的应用程序中, 导入 CSS 层 Panda 发送( 例如生成) `styled-system/styles.css` 或您自己的条目,符合熊猫的地层设置) 和使用情况 `css()`, (中文(简体) ), **食谱**,以及 **模式** 从你的 `outdir` 和任何其他一样 熊猫计划.

## 颜色模式( 浅/ 暗)

此预设用途中的语义符号 **`_light`** 财务报告和审定财务报表 **`_dark`** (例如颜色, (原始内容存档于2013-10-12). shadows. 要正确应用这些值,文档根应带有 **类** 选择活动颜色模式:

-   设定 **`class="light"`** 或者说 **`class="dark"`** 打开 **`<html>`** (或另一个) 组合元素的设置用途).

示例

```html
<html class="light">
  <!-- ... -->
</html>
```

没有其中一类,轻/暗依赖的符号可能无法解决 以你所期待的方式.

### 下一个.js和 `next-themes`

与 [**下一个主题**](https://github.com/pacocoursey/next-themes),使用时 **`attribute="class"`** 因此活动主题被反映为 `light` 编号 : `dark` 打开 **`<html>`**,匹配熊猫 **`_light`** 编号 : **`_dark`** 语义符号. `defaultTheme` 编号 : `enableSystem` 取决于您的产品默认值.

```tsx
// 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>
  )
}
```

```tsx
// 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`。 。 。 .

## 相关

-   [Chakra UI 文档](https://www.chakra-ui.com/)
-   [熊猫CSS文档](https://panda-css.com/)

## 常见问题

### @chakra-ui/panda-preset 是什么？

Chakra UI的熊猫预设

### 如何安装 @chakra-ui/panda-preset？

在项目目录运行 npm install @chakra-ui/panda-preset，或使用 pnpm add / yarn add / bun add。

### @chakra-ui/panda-preset 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @chakra-ui/panda-preset 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @chakra-ui/panda-preset 可以商用吗？

@chakra-ui/panda-preset 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @chakra-ui/panda-preset 的下载量有多少？

根据 npm 官方下载统计，@chakra-ui/panda-preset 在 2026/10/10 – 2026/11/08 这 30 天内被下载 2,573 次，日均约 86 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @chakra-ui/panda-preset 还在维护吗？

最新版本 3\.38\.0 发布于 2026/11/03（5 天前）；至今共发布 54 个版本，其中过去 12 个月发布了 10 个；首次发布于 2025/01/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。