欢迎来到 Chakra UI Pro 主题

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

安装

确保在您的工程中安装 Chakra UI 。 如果不是,你可以跟着 chakra UI网站上的安装指南。 。 。 . 要安装 Chakra UI Pro主题, 您可以使用线条 :

yarn add install @chakra-ui/pro-theme

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

npm install @chakra-ui/pro-theme

设置 Pro 主题

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

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

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

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 默认字体家族。 要包含此内容, 首先需要安装字体 :

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

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

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

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

使用不同的字体

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

yarn add @fontsource-variable/inter

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

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 依赖:

yarn add --dev @chakra-ui/cli

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

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

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

关于Chakra CLI和主题打字的更多信息,请查看 Chakra CLI 文档。 。 。 .