前言

很长一段时间没有更新记录文章了，主要是公司新上线一个重要的C端项目，这两个月都在抓紧时间Init和上线新功能，大概做了两个版本，基本上搭建起来了，后面的迭代开发应该比较顺手，由此想记录一下新使用的一个UI库---Chakra UI。Chakra UI库给我的一个最大的感受就是可定制化程度高，响应式开发非常方便。当然对应的缺点就是很多基础组件都需要自己手动实现。对于C端项目来说还是比较痛苦的，在基础组件封装上都要从0开始开发，比如说DatePicker，Select等。除此之外因为其css in js的特性，可能会对性能产生一点影响，不过对于公司的项目而言应该可以忽略不计，而且这并不是它所独有的问题。此外chakra UI使用了几乎和tailwind css一样的Api，所以结合代码提示，对于tailwind用户而言非常容易上手。

基础布局组件

Box

Box组件是Chakra中最底层的一个组件，其他组件都基于此开发，它呈现为一个div元素。可以通过as prop的方式来改变元素的渲染，比如：

<Box as='button' borderRadius='md' bg='tomato' color='white' px={4} h={8}>
  Button
</Box>

通过传递一个prop你可以自由地将其渲染成你所需要的元素，基于此，其他的基础组件也可以通过这种方式进行自定义渲染。

Stack

Stack组件是一个基础布局组件，也是日常最常使用的布局组件，它可以将按照指定方向堆叠子组件，且各子组件之间均匀分布，你可以通过spacing属性控制子组件间的间距，等同于css中的gap属性。 你需要这样导入：

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

它有两个已知变体HStack和VStack，分别用于从水平方向和垂直方向堆叠元素，通过这两个Stack的使用，你基本上不需要再写Flex布局了，这也是它非常优势的一点。当然除了这两个已知的Stack以外，你仍然可以通过direction熟悉指定堆叠的方向，这种方式适用于响应式布局，可以通过断点值配置对应的direction。

<Stack direction={['column', 'row']} spacing='24px'>
  <Box w='40px' h='40px' bg='yellow.200'>
    1
  </Box>
  <Box w='40px' h='40px' bg='tomato'>
    2
  </Box>
  <Box w='40px' h='40px' bg='pink.100'>
    3
  </Box>
</Stack>

这里使用了chakra默认的断点设置，也就是在屏幕宽度较小时展现为VStack布局，大屏时展现为HStack布局，当你自定义断点配置后（后面会提到如何自定义配置），一般可以这样写

<Stack direction={{base: 'column', lg: 'row'}} spacing='24px'>
</Stack>

另外一点是Stack组件内的元素默认会居中对齐，如果需要修改可以通过其align和justify属性进行设置。

Flex

Flex组件是一个自带display:flex的Box，所以依旧呈现为一个div元素。它的作用和HStack非常类似，不过区别在于，Flex组件内的子组件是没有固定间距的，你需要与Spacer组件联合使用，这样子组件将会跨越整个容器

Spacer

Spacer组件会创建一个空白区域，常用于Flex组件和Stack组件中，它会默认填满剩余空间，当然你也可以指定它的宽度。因为Stack组件内的子组件是固定间距的，对其设置spacing将会应用于所有的子元素，在进行一些响应式布局和特殊布局的时候你可能需要用到这个组件。