React UI 组件库 Chakra UI - 01 v1.0介绍和快速使用

Chakra UI

Chakra UI 是简单、模块化和可访问的 UI 组件库。

本文 Chakra UI 版本：v1.6.2

• 基于 React 和 Emotion（CSS-IN-JS 方案库）
• 基于 Styled System
  • Styled System 构建的 UI 组件，可以通过样式属性快速设置样式
  • Chakra UI 主题设置规范参考 Styled System Theme Specification
• 支持开箱即用的主题功能
  • 基于 Chakra 默认提供的主题进行构建或扩展
• 支持颜色模式，大部分组件默认支持暗夜模式
• 拥有大量功能丰富且非常有用的组件
• 使响应式设计变得轻而易举
  • 内部提供了为元素添加响应式样式的方式
• 适用于构建用于给用户展示的界面
  • 相对的，Antd 更适合做企业管理后台界面

缺点：

• 有些功能文档没有讲的很明白
• 一些组件的 colorScheme 、size、variant 需要自己扩展

快速使用

安装

• @chakra-ui/react Chakra UI 核心库
• @emotion/react Emotion 核心库
• @emotion/styled Emotion styled API
• framer-motion 一个 React 动画库，提供了一些通过 prop 与组件对接的API

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

设置 Provider

Chakra UI 提供的组件都是建立在主题基础之上的。

要想让组件正常运行，需要在应用最外层设置 ChakraProvider 组件。

ChakraProvider组件为主题对象提供上下文环境，将主题对象放在全局，供包裹的组件使用。

Chakra UI 默认为用户提供了一套主题，也可以通过 theme 属性使用自定义主题。

ChakraProvider组件可以配置 theme 和 resetCSS 属性：

• theme 自定义或扩展的主题对象
  • Chakra UI 默认提供了一个主题样式
  • Chakra UI v0 版本还需要手动import并传入默认主题
• resetCSS 是否自动添加 CSSReset 组件
  • 默认为 true
  • CSSReset 组件用于设置 CSS 重置样式
  • Chakra UI v0 版本需要手动添加该组件

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { ChakraProvider } from '@chakra-ui/react'

ReactDOM.render(
  <ChakraProvider>
  	<App />
  </ChakraProvider>,
  document.getElementById('root')
)

查看效果

// App.js
import { useTheme, Button } from '@chakra-ui/react'

function App() {
  // 调用钩子函数，查看默认主题对象
  console.log(useTheme())
  return (
    <div>
      <Button colorScheme="blue">Button</Button>
    </div>
  );
}

export default App;

npm start

Style Props 样式属性

Style Props （样式属性）是通过向组件传递属性来更改组件样式的一种方式。

它通过提供简化的样式属性的方法提高开发效率。

Chakra UI 的组件提供了很多简化的样式属性，例如：

样式属性	CSS 属性	主题
m, margin	margin	space
mt, marginTop	margin-top	space
mx	margin-inline-start + margin-inline-end	space
my	margin-top + margin-bottom	space
p, padding	padding	space
pt, paddingTop	padding-top	space
color	color	colors
bg, background	background	colors
bgColor	background-color	colors
opacity	opacity	none
border	border	borders
borderWidth	border-width	borderWidths
borderStyle	border-style	borderStyles

样式属性更多查看：Style Props - Chakra UI

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

function App() {
  return <Box w="200px" h="100px" bgColor="tomato" color="gray.600" />
}

export default App

主题：表示可以使用主题中对应节点下定义的预设值，例如 colors 节点下的 gray.50 表示 #f7fafc。详细参考 [Default Theme](