Chakra-UI组件库介绍

Chakra-UI是一个现代化React UI框架。它是用来构建用户界面的。

Chakra-UI是一个简单的、模块化的易于理解的UI组件库。提供了丰富的构建React应用所需的UI组件。

其优点有下面几点：

1. Chakra Ul 内置 Emotion，是 CSS-IN-JS 解决方案的集大成者

2. 基于 Styled-Systems https://styled-system.com/

3. 支持开箱即用的主题功能

4. 默认支持白天和黑夜两种模式

5. 拥有大量功能丰富且非常有用的组件

6. 使响应式设计变得轻而易举

7. 文档清晰而全面.查找API更加容易

8. 适用于构建用于展示的给用户的界面

9. 框架正在变得越来越完善

1. 下载Chakra-UI库和Chakra-UI的主题

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

chakra-ui提供的组件是建立在主题基础上的，只有先引入了主题组件才能够使用其他组件。

参考官网链接：Chakra-UI

2. 引入主题

import { ChakraProvider, CSSReset, Button } from '@chakra-ui/react'
import chakraTheme from '@chakra-ui/theme'

3. 引入Chakra-UI重置组件CSSReset

function App () {
  return (
    <ChakraProvider theme={chakraTheme}>
      <CSSReset />
      <Button>按钮</Button>
    </ChakraProvider>
  )
}

4. Style Props 样式属性

style props 使用来更改组件样式的，通过为组件传递属性的方式实现。通过传递简化的样式属性以达到提升开发效率的目的。详见：STYLED SYSTEM

Prop	CSS Property	Theme Key
m, margin	margin	space
mt, marginTop	margin-top	space
mr, marginRight	margin-right	space
me, marginEnd	margin-inline-end	space
mb, marginBottom	margin-bottom	space
ml, marginLeft	margin-left	space
ms, marginStart	margin-inline-start	space
mx, marginX	margin-inline-start + margin-inline-end	space
my, marginY	margin-top + margin-bottom	space
p, padding	padding	space
pt, paddingTop	padding-top	space
pr, paddingRight	padding-right	space
pe, paddingEnd	padding-inline-end	space
pb, paddingBottom	padding-bottom	space
pl, paddingLeft	padding-left	space
ps, paddingStart	padding-inline-start	space
px, paddingX	padding-inline-start + padding-inline-end	space
py, paddingY	padding-top + padding-bottom	space

Prop	CSS Property	Theme Key
color	color	colors
bg, background	background