chakra-ui学习笔记（一）

前言：发现chakra-ui也不错，虽然比起antd功能稍少一点。

 

1，Stack与Flex区别

Notes on Stack vs Flex#
The Stack component and the Flex component have their children spaced out evenly but the key difference is that the Stack won't span the entire width of the container whereas the Flex will. Another thing to note is that the items in both Stack and Flex are aligned in the center by default.

关于Stack与Flex的注意事项#
Stack组件和Flex组件的子级间隔均匀，但关键区别在于Stack不会跨越容器的整个宽度，而Flex会。另一件需要注意的事情是，默认情况下，Stack和Flex中的项目都在中心对齐。

 

2，文档模块

（1）styled system

 

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

样式属性是一种通过简单地将道具传递给组件来改变其样式的方法。它通过提供有用的速记方法来样式组件，从而有助于节省时间。

包含：margin和padding；color和bg(backgroundColor)；gradient渐变；typography文字排版；layout,width和height；display；flexbox；grid layout；background；borders；border radius；position；shadow；filter过滤；as

 （2）Components

（3）Hooks