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](

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

React UI 组件库 Chakra UI - 05 案例实践
案例实践使用 create-react-app 新建项目. 表单使用 Chakra UI 实现下图的表单: 构建注册表单 react-icons 是一个 React 流行图标库. // compo ...
React UI 组件库 Chakra UI - 02 颜色模式
Color Mode 颜色模式 Chakra UI 内置支持管理应用程序的颜色模式,默认可配置的颜色模式有浅色模式(light).暗色模式(dark).系统模式(system). 大部分组件默认都支持 ...
React UI 组件库 Chakra UI - 03主题对象和 chakra factory
主题对象使用 Chakra UI 默认主题对象中包含很多样式的预设值. 打印 theme 对象: 在使用样式属性设置样式的时候,Chakra 会先从主题对象中获取对应的预设值,如果不存在,则将值作为 ...
React UI 组件库 Chakra UI - 04全局组件样式配置
全局组件样式配置官方文档:Component Style 基础样式和修改器样式大多数组件的样式由基础样式和修改器样式组成,修改器样式根据某些特性或状态更改其大小或视觉样式. 基础样式:默认样式修 ...
Vue UI组件库(Element UI库)
1 移动端常用 UI 组件库 1. Vant Vant 4 - 轻量.可定制的移动端组件库 (vant-ui.github.io) 2. Cube UI cube-ui Document (didi ...
UI组件库Kendo UI for Vue原生组件中文 - 按钮概述
Kendo UI for Vue Buttons包提供了代表用户可以采取的简单操作的触发器组件. Buttons package是Kendo UI for Vue库的一部分,它为Vue生态系统提供原生 ...
UI组件库Kendo UI for Vue中文入门指南（四）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 7. ...
UI组件库Kendo UI for Vue中文入门指南（二）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 5. ...
UI组件库Kendo UI for Vue中文入门指南（一）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 1. ...

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