为什么应该在 React 中使用 Chakra UI

2025-06-11

为什么应该在 React 中使用 Chakra UI

编辑：已添加一个附加项目作为示例：Apartmentfy

如果您想构建一个应用程序或网站，您需要处理很多事情，并且在众多选项中，哪个组件库、css 或 ui 框架将在您的产品最终版本中发挥重要作用。

我尝试过一些组件库，如 Material UI、Antd、React Boostrap 和其他 CSS 框架，如 styled-components、TailwindCSS 等，我甚至尝试用React 和 Bit为自己制作一些迷你组件集。

维护一个库，或者说一组遵循一致性的产品组件非常困难，如果限制太多或 API 过于复杂，选择一个用于 UI 的库可能会很麻烦。归根结底，你的目标是节省时间，专注于真正重要的事情。

我不打算撒谎，Chakra UI 出现在我的雷达上是因为我是火影忍者的粉丝，而且在第一秒我就认为我可以像忍者一样设计它。

火影忍者奔跑

好处

那么使用这个组件库主要有什么好处呢？

  • Chakra UI 提供的所有组件均遵循 WAI-ARIA 标准，我认为这对我们大多数人来说都是一个悬而未决的问题。如果您不明白为什么这一点如此重要，请查看这篇文章。
  • 组件易于主题化、扩展和完全定制。
  • 组合组件，组件很小，易于组合形成更大的结构。
  • 不同的颜色模式，在典型的亮色和暗色之间切换，甚至在任何其他颜色组之间切换都将是轻而易举的事。
  • 您将在更短的时间内用更少的资源做更多的事情，这实际上是大多数库和框架的目标。
  • 社区仍然很小（这可能是一件好事，你可以从一开始就加入），但它非常活跃。

资源

您可以直接转到使用了我将在本文中讨论的几乎所有内容的示例项目，或者尝试最终的 PWA 版本。

附加示例项目，Apartmentfy

并且一定要查看官方 Chakra UI 网页。

先决条件

本文中的示例项目和代码示例都是用NextJS制作的，但您可以将它与任何基于 React 的库/框架（例如Gatsby或Create React App）一起使用。

本文中的代码示例与您选择使用的任何 React 平台几乎相同。

安装

您需要安装 Chakra UI 和同等依赖项，例如emotion和framer-motion。

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
Enter fullscreen mode Exit fullscreen mode 
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
Enter fullscreen mode Exit fullscreen mode

一旦安装了软件包，就需要配置提供程序。

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'

import Layout from '@/components/Layout'

import '@/styles/globals.css'
import theme from '@/styles/theme'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ChakraProvider>
  )
}

export default MyApp
Enter fullscreen mode Exit fullscreen mode

对于 CRA，您将在index.jsApp 组件周围配置您的提供程序。

便捷工具项目

我使用 NextJS 和 Chakra UI 构建了一个简单的项目，其中包含不同的小实用程序，例如密码生成器或字数统计器，这些都是非常基础的东西。

这个想法是用第一个项目测试组件库并测试构建以下实用程序的速度。

不得不说，学习起来非常顺畅，或许是因为我习惯使用styled-components 的原因，但这是迄今为止我尝试过的最简单的组件库。开发者体验也很好，所以我肯定会回来继续这个项目，并添加更多有趣的实用功能。

原子组件

Chakra UI 最让我喜欢的一点是它的组件设计非常小巧，方便你将它们组合在一起。组件库提供了原子组件，你可以像使用普通 HTML 标签一样快速轻松地构建更大的元素。

例如，我们来看一下Handy Tools中的Layout组件组成：

// components/Layout.js
import { Box, Flex } from '@chakra-ui/react'

import Header from '@/components/Header'
import Footer from '@/components/Footer'

<Flex color="white" direction="column" minH="100%">
  <Header h="4rem" />
  <Box
    color="black"
    flex="1"
    padding="1rem"
    margin="0 auto"
    width="100%"
    backgroundColor="linkedin.100"
  >
    {children}
  </Box>
  <Footer h="3rem" />
</Flex>
Enter fullscreen mode Exit fullscreen mode

Box并且Flex是您可以使用的最基本的组件，它们就像常规<div>标签一样，正如您所猜测的，Flex 与 Box 相同，但display: flex其中包含。

您最初使用该库的大部分时间将花在阅读官方的 Chakra UI 文档上，其中有很多示例和变体，您肯定会发现它们对于构建您的项目很有价值且足够。

您将找到用于网页布局的组件，用于表单的每个组件、警报、模式、加载、排版、导航、媒体甚至抽屉，这些对于移动分辨率和骨架 UI 非常有用，可以显示组件的加载状态并避免累积布局偏移

对于我第一次接触 Chakra UI 来说，这与使用 React Native 中的预构建组件非常相似。

主题

Chakra UI 的核心价值之一是主题，并且可以很容易地根据您的喜好进行调整。

在样式文件夹中，我创建了一个theme.js包含以下内容的文件：

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  fonts: {
    heading: 'Lato',
    body: 'Roboto',
  },
})

export default theme
Enter fullscreen mode Exit fullscreen mode

在此文件中，您可以定义应用程序的所有常规主题，例如字体大小、断点、行高等。

对于颜色，Chakra UI 有一个受 Tailwind CSS 启发的默认主题，颜色范围从 50 到 900。

进一步扩展主题

使用组件库时可能遇到的障碍之一是您的风格或设计师提供的风格可能与基础设计不同。

这可能会令人头疼，进行所有这些更改最终可能会让您认为需要做更多的工作来调整库而不是从头开始。

我们来看看从官方文档中提取的这个例子：

// styles/theme.js
import { extendTheme } from "@chakra-ui/react"

const theme = extendTheme({
  components: {
    Button: {
      // 1. We can update the base styles
      baseStyle: {
        fontWeight: "bold", // Normally, it is "semibold"
      },
      // 2. We can add a new button size or extend existing
      sizes: {
        xl: {
          h: "56px",
          fontSize: "lg",
          px: "32px",
        },
      },
      // 3. We can add a new visual variant
      variants: {
        "with-shadow": {
          bg: "red.400",
          boxShadow: "0 0 2px 2px #efdfde",
        },
        // 4. We can override existing variants
        solid: (props) => ({
          bg: props.colorMode === "dark" ? "red.300" : "red.500",
        }),
      },
    },
  },
})

export default theme
Enter fullscreen mode Exit fullscreen mode

我认为 Chakra UI 团队付出了巨大的努力，才使得这个库能够轻松适应您的需求。这只是一个小例子，如果我想涵盖这个库的所有定制可能性，那么足以写一篇完整的文章，请务必查看官方关于主题的文档。

如果您需要进行大量更改，这个文件可能会非常大，但具有所有可访问性和一致性的基本主题仍然可以供您使用。

响应式

使用响应式样式非常容易，忘记媒体查询和重写 css 类（当然，如果需要，您可以使用它）。

Chakra UI 使用默认断点，但您可以创建自己的断点：

import { createBreakpoints } from "@chakra-ui/theme-tools"

const breakpoints = createBreakpoints({
  sm: "30em",
  md: "48em",
  lg: "62em",
  xl: "80em",
  "2xl": "96em",
})
Enter fullscreen mode Exit fullscreen mode

假设你有一个 div，并且你想根据不同的断点调整它的大小：

<Box width={[300, 400, 500]}>
  I am a div
</Box>
Enter fullscreen mode Exit fullscreen mode

该数组将在内部进行匹配，因此：

  • 300 将从 30em 开始应用
  • 400 将从 48em 开始应用
  • 500 将从 62em 开始应用

响应值的另一种语法可以是：

<Box width={{ sm: '300px', md: '400px', xl: '500px' }}>
  I am a div
</Box>
Enter fullscreen mode Exit fullscreen mode

在上面的例子中，我们做了同样的事情，但我们针对的是特定的断点。为了在数组示例中获得相同的结果，我们需要传递一个 null 来跳过lg断点[300, 400, null, 500]：

使用此语法，您不需要任何媒体查询（Chakra UI 将在引擎盖下执行此操作），但如果您需要使用媒体查询，请查看下一部分有关 Hooks 的内容。

黑暗模式

Chakra UI 提供的组件支持暗黑模式。您唯一需要提供的配置是ColorModeScript：

NextJS

// pages/_document.js
import { ColorModeScript } from '@chakra-ui/react'
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'

import theme from '@/styles/theme'

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

加拿大税务局

// index.js
import ReactDOM from "react-dom"

import App from "./App"
import theme from "./theme"

ReactDOM.render(
  <>
    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
    <App />
  </>,
  document.getElementById("root"),
)
Enter fullscreen mode Exit fullscreen mode

让我们在下一节中检查需要使用哪些钩子来在主题之间切换。

钩子

Chakra UI 还提供了一系列方便的钩子来加快工作速度。

使用颜色模式

在上一节中，我们为应用程序配置了暗模式，让我们看看如何构建一个按钮来在亮模式和暗模式之间切换。

// components/ColorChanger.js
import { IconButton, useColorMode, useColorModeValue } from '@chakra-ui/react'
import { SunIcon, MoonIcon } from '@chakra-ui/icons'

export default function ColorChanger() {
  const { toggleColorMode } = useColorMode()
  const text = useColorModeValue('dark', 'light')
  const SwitchIcon = useColorModeValue(MoonIcon, SunIcon)

  return (
    <IconButton
      size="md"
      fontSize="lg"
      aria-label={`Switch to ${text} mode`}
      variant="ghost"
      color="current"
      onClick={toggleColorMode}
      icon={<SwitchIcon />}
    />
  )
}
Enter fullscreen mode Exit fullscreen mode

useColorMode提供了toggleColorMode功能，这就是我们在两个主题之间切换所需要的，尝试这个钩子并查看库中包含的所有组件如何在无需任何配置的情况下自动切换。

useColorMode值

在上面的例子中，您可以看到useColorModeValue这个钩子非常有用，可以根据我们所处的主题分配不同的颜色。例如：

// components/WordCounters.js
import { Flex, Text, useColorModeValue } from '@chakra-ui/react'

export default function WordCounters({ value, caption }) {
  const bg = useColorModeValue('whiteAlpha.900', 'gray.800')

  return (
    <Flex flexDirection="column" alignItems="center" padding="1rem" bg={bg}>
      <Text fontSize="3xl" fontWeight="bold">
        {value}
      </Text>
      <Text>{caption}</Text>
    </Flex>
  )
}
Enter fullscreen mode Exit fullscreen mode

在这个例子中，我们将这个组件的背景从whiteAlpha.900浅色主题更改gray.800为深色主题。

useMediaQuery

正如我之前所说，如果我们需要使用媒体查询，我们可以使用这个钩子：

import { useMediaQuery } from "@chakra-ui/react"

function Example() {
  const [isLargerThan1280] = useMediaQuery("(min-width: 1280px)")

  return (
    <Text>
      {isLargerThan1280 ? "larger than 1280px" : "smaller than 1280px"}
    </Text>
  )
}
Enter fullscreen mode Exit fullscreen mode

借助此钩子，您可以在触发媒体查询时执行代码。

与其他库的比较

还有其他知名的库，如Material UI和Antd或TailwindCSS。

材质 UI

我对 Material UI 最大的担忧是 API，你必须学习很多东西才能使用该库，你会得到一个非常漂亮和干净的设计，但另一方面，它是一个很难定制的设计，很难让它看起来像你自己的。

Chakra UI 的优点在于，您可以保留库的原样或更改一些颜色（就像我在 Handy Tools 中所做的那样）或对其进行自定义，使其看起来像您自己的库，而所有这些都不需要一页又一页的 API。

Antd

在使用 Chakra UI 之前，我使用过 Antd，其原子组件也非常棒，非常易于使用且易于遵循文档，但对于定制，我发现它比 Chakra UI 更难。

在 Antd 中，他们使用 Less 进行了定制。

Tailwind CSS

我喜欢用 Tailwind CSS 做项目，它确实加快了开发速度，而且我发现它在完成工作方面非常有用。它的性能更出色，如果你或你的团队有使用 Bootstrap 的经验，就能很快掌握相关知识。

我发现 Tailwind CSS 的问题在于如何保持代码简洁，尤其是在成员较多的项目中，要为这部分建立一个良好的架构并不容易。诸如可访问性或键盘导航之类的功能必须手动处理。

最终，Chakra UI 的所有道具都像任何其他 React 组件一样，因此我发现它更容易用于团队合作。

关注点分离

也许您不喜欢 Chakra UI 的一点是它将 css 相关的实用程序与应用程序逻辑混合在一起，这实际上不是 Chakra UI 的问题，而是任何 CSS-in-JS 解决方案的设计问题。

在 Handy Tools 项目中，我添加的最后一个实用程序遵循与 React Native 中的样式相同的想法：

// pages/px-converter.js
export default function PxConverter() {
  return (
    <Box>
      <Heading {...styles.heading}>Px Converter</Heading>
      <Select
        onChange={onOptionChange}
        defaultValue="pxToREM"
        {...styles.select}
      />
    </Box>
  )
}

const styles = {
  heading: {
    marginBottom: '0.5em',
  },
  flex: {
    alignItems: 'center',
    marginLeft: '0.2em',
  },
  flexCenter: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    bg: 'white',
    marginRight: '0.5em',
  },
  select: {
    bg: 'white',
    maxWidth: '400px',
    margin: '0 auto',
  },
  grid: {
    maxWidth: '600px',
    margin: '1.5em auto',
  },
  gridItem: {
    display: 'flex',
    alignItems: 'center',
    marginX: '1em',
  },
  buttonGroup: {
    justifyContent: 'center',
    size: 'sm',
    marginX: '0.5em',
  },
}
Enter fullscreen mode Exit fullscreen mode

我从 React Native 的 createStylesheet 模式中复制了这个思想，通过这个你可以轻松地拆分与逻辑相关的 props 的 CSS 部分。

但是，最终对单独的标准 CSS 文件的担忧可能是一个缺点，请查看下一部分以了解 Chakra UI 是否适合您的需求。

如果……Chakra UI 可能适合您。

  • 您正在开展一个小型/中型项目。*
  • 您不想/不能投入精力来创建组件库。
  • 可访问性对您来说很重要，但您不想/不能投入精力。
  • 您或您的团队对 JS 的熟练程度高于对 CSS 的熟练程度。**
  • 您正在尝试在您的团队中建立一个共同的架构。***
  • 您需要自己的组件库，但要有坚实的基础。
  • 您正在使用另一个组件库，但发现它并不能加快您的开发时间。

*我谈论项目的大小是因为 CSS-in-JS 有一个共同的问题，它们毕竟是 JS，浏览器处理 CSS 文件比运行 JS 更容易，特别是如果你的应用程序经常更改数据，但常见的 Web 应用程序非常适合 Chakra UI 的性能。

**不要认为您可以因为 Chakra UI 或任何其他 CSS-in-JS 解决方案而避免学习 CSS，语法非常相似，了解正确的 CSS 会有很大帮助。

**许多前端开发人员最薄弱的环节是维护 CSS 文件，拥有像 Chakra UI 这样的解决方案，可以与我们从 React 组件中已经了解的 props 无缝融合，有助于保持项目的清洁和可维护。

如果……Chakra UI 可能不适合您

  • 您正在开展一个大项目和/或更改大量数据。
  • 您或您的团队对 CSS 的熟练程度比对 JS 的熟练程度更高。
  • 您需要在没有 Chakra UI 的几个项目之间共享您的样式文件。

在 Chakra UI 之上

  • Chakra UI Pro由 Chakra UI 的创建者制作的更大组件的集合，您可以找到一些非常常见和有用的免费组件。
  • Choc UI另一个用于快速开发常见网页的大型组件集合。他们有一份很好的未来组件路线图，值得一看。

结论

如果您需要高质量的组件来启动您的下一个项目和/或想要自定义具有良好起点的组件，我认为 Chakra UI 在努力/结果之间实现了完美的平衡。

对于我来说，做 Handy Tools 不仅仅是作为本文的一个非常小的示例项目，也是一次很好的体验，我会将 Chakra UI 描述为具有干净的默认设计，就像在 Material UI 中一样，具有简单的颜色和由 TailwindCSS 提供的响应式设计，加上 Antd 组件的原子设计和方便的可访问性层，所有这些都包含在一个包中。

鏂囩珷鏉ユ簮锛�https://dev.to/dastasoft/why-you-should-use-chakra-ui-in-react-151o
Devto 翻译
PREV
全栈 JavaScript 开发人员处理日期和时间的指南
NEXT
为 ASP.NET MVC 设置 React 环境