Chakra UI 是一个广受欢迎的 React 开源组件库，提供一系列易于访问、可复用且高度可定制的 UI 组件。它以简洁、模块化和无障碍设计为核心，帮助开发者轻松构建美观且一致的用户界面。Chakra UI 利用 CSS-in-JS 的强大功能进行样式处理，能与 React 应用无缝集成。
Chakra UI 的主要优势：
内置可访问性: Chakra UI 从设计之初就充分考虑了可访问性。其组件自带必要的辅助功能，例如合适的 ARIA 属性、键盘导航和焦点管理。 全面的组件库: 提供丰富的预构建组件，包括按钮、模态框、表单元素、滑块等等，所有组件都遵循一致的设计规范。 响应式设计: 组件完全响应式，能轻松适应各种屏幕尺寸。采用移动优先设计理念，并提供响应式工具函数来处理基于屏幕尺寸的布局调整。 高度可定制和主题化: 拥有可自定义的内置主题。您可以修改默认主题的颜色、字体和间距，创建符合您需求的个性化设计系统。 基于 CSS-in-JS 的样式: 基于 @emotion/react 库，采用 CSS-in-JS 方法。这使得您可以在组件内部直接定义样式，更方便地动态且一致地设置样式。 实用函数: 提供众多实用函数和 Hook，例如 useDisclosure、useBreakpointValue 等，简化模态框的打开/关闭以及响应式设计的处理。 易于使用和集成: API 简单易懂，配置简单。能与其他库（如 React Router、React Hook Form 等）无缝集成。如何开始使用 Chakra UI：
在您的 React 项目中使用 Chakra UI，请遵循以下步骤：
安装 Chakra UI:首先，安装 Chakra UI 及其依赖项：
1
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
@emotion/react 和 @emotion/styled 用于样式处理，framer-motion 用于 Chakra UI 中的动画效果。
设置 Chakra Provider:Chakra UI 组件需要包裹在 组件内，该组件为应用中的所有组件提供默认主题。
Chakra UI 设置示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from react;
import { ChakraProvider, Button } from @chakra-ui/react;
function App() {
return (
<ChakraProvider>
<div style={{ padding: 16px }}>
<Button colorScheme="teal">Hello Chakra UI</Button>
</div>
</ChakraProvider>
);
}
export default App;
此示例中，我们导入 ChakraProvider 来提供默认主题，并使用了 Chakra UI 的 Button 组件。
自定义主题:Chakra UI 的默认主题可以使用 extendTheme 函数轻松定制。您可以全局更改主题的颜色、字体等方面。
自定义主题示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from react;
import { ChakraProvider, Button, extendTheme } from @chakra-ui/react;
const theme = extendTheme({
colors: {
brand: {
100: #e6fffa,
200: #b2f5ea,
300: #81e6d9,
400: #4fd1c5,
500: #38b2ac,
600: #319795,
700: #2c7a7b,
800: #285e61,
900: #234e52,
},
},
});
function App() {
return (
<ChakraProvider theme={theme}>
<div style={{ padding: 16px }}>
<Button colorScheme="brand">Custom Themed Button</Button>
</div>
</ChakraProvider>
);
}
export default App;
此示例中，我们使用自定义的品牌颜色扩展默认主题，并在 Button 组件中使用它们。
使用 Chakra UI 的响应式设计:Chakra UI 提供响应式设计系统，方便构建适合移动设备的布局。您可以使用 Chakra 的响应式工具函数（例如 useBreakpointValue）根据屏幕尺寸显示不同的内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from react;
import { Box, useBreakpointValue } from @chakra-ui/react;
function App() {
const bgColor = useBreakpointValue({ base: teal.100, md: purple.100 });
return (
<Box bg={bgColor} height="100vh">
<h1>Hello, Chakra UI</h1>
</Box>
);
}
export default App;
此示例中，Box 组件在小屏幕上显示青色 100 背景，在中等及以上屏幕尺寸上显示紫色 100 背景。
使用 Chakra UI 组件:Chakra UI 提供大量易于使用和配置的组件。以下是一个模态框和按钮的示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from react;
import {
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
useDisclosure,
} from @chakra-ui/react;
function App() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<div>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal
以上就是React 中的 Chakra UI 入门：完整指南的详细内容，更多请关注php中文网其它相关文章！