# @chakra-ui/pro-theme 中文文档

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

版本：0\.10\.0
npm 元数据更新时间：2025-08-25T12:25:04.495Z
中文译文更新时间：2026-11-09T09:54:09.689Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40chakra-ui/pro-theme
原文对照：https://npmcn.com/package/%40chakra-ui/pro-theme/?lang=original

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

- 包体积（解压后）：190 kB，138 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2022-02-09T16:26:15.256Z
- 最新版本发布：2023-07-13T10:17:27.908Z
- 近 30 天下载量：74881（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：83（近 12 个月 0 个）

## 中文简介

Chakra UI Pro主题扩展了基础 Chakra UI主题,引入了额外的组件变体,尺寸,以及语义符号和文本层样式的集合. 与最初的 Chakra UI 主题完美匹配, Pro主题使您的用户

## 安装

```sh
npm install @chakra-ui/pro-theme
```

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

## README

# 欢迎来到 Chakra UI Pro 主题

Chakra UI Pro主题扩展了基础 Chakra UI主题,引入了额外的组件变体,尺寸,以及语义符号和文本层样式的集合. 与最初的 Chakra UI 主题完美相配, Pro主题使您的用户界面看起来更好, 它不会破坏您的当前设置 。 不过只要注意一下 - 如果你的自定义变体和我们的名字相同, 你可能会看到一些变化。 关于Pro主题的最好经验,你不妨看看我们的比较 [这里](https://pro-theme.chakra-ui.com/)。 。 。 .

## 安装

确保在您的工程中安装 Chakra UI 。 如果不是,你可以跟着 [chakra UI网站上的安装指南](https://chakra-ui.com/docs/getting-started)。 。 。 . 要安装 Chakra UI Pro主题, 您可以使用线条 :

```bash
yarn add install @chakra-ui/pro-theme
```

或者,如果您喜欢使用 npm :

```bash
npm install @chakra-ui/pro-theme
```

## 设置 Pro 主题

设立Pro主题是一个直接的过程. Pro主题从Chakra UI中扩展了基础主题,可以被收入几个简单的步骤. 从 Chakra UI 导入 Pro 主题和基础主题 :

```typescript
import { theme as proTheme } from '@chakra-ui/pro-theme'
import { extendTheme, theme as baseTheme } from '@chakra-ui/react'
```

接下来,用我们的Pro主题扩展基础主题:

```javascript
export const theme = extendTheme(
  {
    colors: { ...baseTheme.colors, brand: baseTheme.colors.blue },
  },
  proTheme,
)
```

此代码片段从 Chakra UI 导入 Pro主题和基础主题 。 然后使用 `extendTheme` 函数从 Chakra UI 将 Pro主题与自定义配置合并.

## 字体配置

Chakra UI Pro 主题用途 `Spline Sans` 作为 `heading` 字体家族和 `Open Sans` 作为 `body` 默认字体家族。 要包含此内容, 首先需要安装字体 :

```bash
yarn add @fontsource-variable/spline-sans @fontsource-variable/open-sans
```

然后,您可以在您的主题设置中导入 :

```javascript
import '@fontsource-variable/open-sans'
import '@fontsource-variable/spline-sans'
```

> 注:取决于平台/框架,安装字体的最佳方式可能有所不同.

### 使用不同的字体

要使用不同的字体, 如 `Inter`,您首先需要安装字体 :

```bash
yarn add @fontsource-variable/inter
```

然后,导入字体并调整 `fonts` 在主题配置中键 :

```javascript
import { theme as proTheme } from '@chakra-ui/pro-theme'
import { extendTheme, theme as baseTheme } from '@chakra-ui/react'
import '@fontsource-variable/inter'

export const theme = extendTheme(
  {
    colors: { ...baseTheme.colors, brand: baseTheme.colors.blue },
    fonts: {
      heading: "'Inter Variable', -apple-system, system-ui, sans-serif",
      body: "'Inter Variable', -apple-system, system-ui, sans-serif",
    },
  },
  proTheme,
)
```

## 生成主题打字

通过 Chakra UI Pro主题,您可以通过生成主题打字来增强您的发展经验. 这使得Pro主题中使用的主题符号可以提供给您的IDE的Intellisense,帮助更快和更准确的开发.

要生成主题打字,请遵循这些步骤:

首先,将 Chakra CLI 安装为 dev 依赖:

```bash
yarn add --dev @chakra-ui/cli
```

接下来,使用以下命令生成主题打字. 替换 `'./path-to-theme.ts'` 带有您主题文件的实际路径 :

```bash
yarn chakra-cli tokens ./path-to-theme.ts
```

完成后,您可能需要在VSCode中"重新启动 TS 服务器"来查看更改.

关于Chakra CLI和主题打字的更多信息,请查看 [Chakra CLI 文档](https://chakra-ui.com/docs/styled-system/advanced-theming#theme-typings)。 。 。 .

## 常见问题

### @chakra-ui/pro-theme 是什么？

Chakra UI Pro主题扩展了基础 Chakra UI主题,引入了额外的组件变体,尺寸,以及语义符号和文本层样式的集合\. 与最初的 Chakra UI 主题完美匹配, Pro主题使您的用户

### 如何安装 @chakra-ui/pro-theme？

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

### @chakra-ui/pro-theme 支持 TypeScript 吗？

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

### @chakra-ui/pro-theme 支持 ESM 还是 CommonJS？

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

### @chakra-ui/pro-theme 可以商用吗？

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

### @chakra-ui/pro-theme 的下载量有多少？

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

### @chakra-ui/pro-theme 还在维护吗？

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