Chakra-UI组件库介绍

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

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

其优点有下面几点：

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

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

支持开箱即用的主题功能

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

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

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

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

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

框架正在变得越来越完善

下载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	colors
bgColor	background-color	colors
opacity	opacity	none

Prop	CSS Property	Theme Key
bgGradient	background-image	none
bgClip, backgroundClip	background-clip	none

Prop	CSS Property	Theme Key
fontFamily	font-family	fonts
fontSize	font-size	fontSizes
fontWeight	font-weight	fontWeights
lineHeight	line-height	lineHeights
letterSpacing	letter-spacing	letterSpacings
textAlign	text-align	none
fontStyle	font-style	none
textTransform	text-transform	none
textDecoration	text-decoration	none

Prop	CSS Property	Theme Key
w, width	width	sizes
h, height	height	sizes
minW, minWidth	min-width	sizes
maxW, maxWidth	max-width	sizes
minH, minHeight	min-height	sizes
maxH, maxHeight	max-height	sizes
d, display	display	none
boxSize	width, height	sizes
verticalAlign	vertical-align	none
overflow	overflow	none
overflowX	overflowX	none
overflowY	overflowY	none

For mx and px props, we use margin-inline-start and margin-inline-end to ensure the generated styles are RTL-friendly

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

<Box w='200px' h='100px' bgColor='tomato'></Box>

box组件最终会被解析成div元素。

<div class="css-23s0yc"></div>

5. 主题的颜色模式（color mode）

5.1 实现暗色和浅色两种模式的切换

支持两种模式：深色模式（dark）和浅色模式（light）；

可以通过useColorMode进行颜色模式更改。

import { useColorMode, Button, Text } from '@chakra-ui/react'

const { colorMode, toggleColorMode } = useColorMode()
console.log(colorMode, toggleColorMode)

<Text>当前的颜色模式为 {colorMode}</Text>
<Button onClick={toggleColorMode}>切换颜色模式</Button>

这一操作对颜色模式的改变可以被持久化，刷新不会丢失。因为chakra将颜色模式存储在了localStorage中，并使用类名策略来确保颜色模式是持久的。每次刷新页面的时候它都会先去localStorage中取这个颜色模式的值，然后再去应用这个值。

注意：当我们做主题颜色模式的切换的时候，内部大的chakra组件也会相应的做颜色模式的切换。

5.2 根据颜色模式设置样式（useColorModeValue钩子函数）

chakra 允许在为元素设置样式的时候根据颜色模式产生不同值，通过 useColorModeValue钩子函数实现。

import {
  Box,
  useColorModeValue,
  useColorMode,
  Button,
  Text
} from '@chakra-ui/react'

const { colorMode, toggleColorMode } = useColorMode()

const bgColor = useColorModeValue('tomato'/*lightModeValue*/, 'skyblue'/*darkModeValue*/)

<Box w='200px' h='100px' bgColor={bgColor}></Box>
<Text>当前的颜色模式为 {colorMode}</Text>
<Button onClick={toggleColorMode}>切换颜色模式</Button>

5.3 强制组件的颜色模式

使组件不受颜色模式的影响，始终保持在某个颜色模式下的样式。

import {
  Box,
  useColorModeValue,
  useColorMode,
  Button,
  Text,
  LightMode,
  DarkMode
} from '@chakra-ui/react'

<LightMode>
    <Text>强制颜色模式为 light</Text>
</LightMode>
<DarkMode>
    <Text>当前的颜色模式为 dark</Text>
</DarkMode>
<Button onClick={toggleColorMode}>切换颜色模式</Button>

5.4 颜色模式通用设置

设置默认颜色模式

通过 theme.config.initialColorMode 可以设置应用使用的默认主题。

使用操作系统所使用的颜色模式

通过theme.config.useSystemColorMode 可以设置将应用的颜色模式设置为操作系统所使用的颜色模式。

值得注意的是，当theme.config.useSystemColorMode设置为true值时，页面刷新时会优先以系统默认颜色模式为准，localStorage中存储的颜色模式值此时会被忽略。

import theme from '@chakra-ui/theme'

// 1.设置默认颜色模式 为 dark
theme.config.initialColorMode = 'dark';

// 2.使用操作系统所使用的颜色模式 值为：boolean
theme.config.useSystemColorMode = true；

6. 主题对象

6.1 颜色Colors

在chakra的主题当中，给我们预定义了一些常见颜色值。

在设置颜色时，可以但不限于取主题当中提供的颜色值。

参考：Colors#

Colors

Black & White

Alphas

Gray

Orange

Yellow

Green

Teal

Blue

Cyan

Purple

Pink

6.2 间距 Space

使用 space 可以定义项目间距。这些间距值可以由padding，margin，和 top、left、right、bottom 样式引用。

Name	Space	Pixels
px	1px	1px
0.5	0.125rem	2px
1	0.25rem	4px
1.5	0.375rem	6px
2	0.5rem	8px
2.5	0.625rem	10px
3	0.75rem	12px
3.5	0.875rem	14px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
7	1.75rem	28px
8	2rem	32px
9	2.25rem	36px
10	2.5rem	40px
12	3rem	48px
14	3.5rem	56px
16	4rem	64px
20	5rem	80px
24	6rem	96px
28	7rem	112px
32	8rem	128px
36	9rem	144px
40	10rem	160px
44	11rem	176px
48	12rem	192px
56	14rem	224px
60	15rem	240px
64	16rem	256px
72	18rem	288px
80	20rem	320px
96	24rem	384px

6.3 宽度大小 Sizes

使用size可以自定义元素大小，这些值可以由width, height, maxWidth, minWidth, maxHeight, minHeight等样式引用。

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

const sizes = {
  sizes: {
    ...theme.space,
    max: 'max-content',
    min: 'min-content',
    full: '100%',
    '3xs': '14rem',
    '2xs': '16rem',
    xs: '20rem',
    sm: '24rem',
    md: '28rem',
    lg: '32rem',
    xl: '36rem',
    '2xl': '42rem',
    '3xl': '48rem',
    '4xl': '56rem',
    '5xl': '64rem',
    '6xl': '72rem',
    '7xl': '80rem',
    '8xl': '90rem',
    container: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
  },
}

const theme = extendTheme({ sizes, ...})

6.4 断点 Breakpoints

响应式数组值中使用的默认断点，这些值将用于生成移动优先（即最小宽度）的媒体查询。

breakpoints:

2xl: "96em"

base: "0em"

lg: "62em"

md: "48em"

sm: "30em"

xl: "80em"

6.5 其他主题对象

以上这些对象大同小异，都是一些分别这对某些内容的预设样式值。当我们需要的时候再去查阅资料按需使用即可。

7. 创建标准的chakra-ui组件

chakra-ui 也为我们提供了一种创建标准chakra UI 组件的方法。

import { chakra } from "@chakra-ui/react"
<chakra.button
  px='3'
  py='2'
  bg='green.200'
  rounded='md'
  _hover={
    
    { bg: 'green.300' }}
>
  Click me
</chakra.button>

const Card = chakra('div', {
  baseStyle: {
    shadow: 'lg',
    rounded: 'lg',
    bg: 'white',
  },
  sizes: {
    sm: {px: '1', py: '3', fontSize: '12px'},
    md: {px: '2', py: '5', fontSize: '16px'},
  },
  variants: {
    primary: {bgColor: 'blue.500', color: 'white'},
    danger: {bgColor: 'red.500', color: 'white'},
  }
})

Card.defaultProps = {
  size: 'sm',
  variant: 'primary'
}
function APP() {


return <div>
<Card size="md" variant="danger">hello</Card>
</div>
}

具体参考：Chakra Factory

我们所创建的chakra UI组件可以通过全局化后在需要使用到的地方直接使用。

也就是全局化Chakra-UI组件样式

a. 在src文件夹中创建 xxx 文件夹，用于放置自定义Chakra-UI组件。

b. 在 xxx 文件夹中创建 card.js 文件并将组件样式放置于当前文件夹中并进行默认导出。

import { chakra } from "@chakra-ui/react"

const Card = chakra('div', {
  baseStyle: {
    shadow: 'lg',
    rounded: 'lg',
    bg: 'white',
  },
  sizes: {
    sm: {px: '1', py: '3', fontSize: '12px'},
    md: {px: '2', py: '5', fontSize: '16px'},
  },
  variants: {
    primary: {bgColor: 'blue.500', color: 'white'},
    danger: {bgColor: 'red.500', color: 'white'},
  }
})

Card.defaultProps = {
  size: 'sm',
  variant: 'primary'
}

export default Card

c. 在xxx 文件夹中创建index.js 文件用于导出所用的自定义组件。

import Card from './card"

export default {
    Card
}

d. 在 src 文件夹中的 index.js 文件导入自定义Chakra-UI组件并和components 属性进行合并。

import xxxComponents from './xxx'

const myTheme = {
    ...theme,
    components: {
        ...theme.components,
        ...xxxComponents
    }
}

e. 在组件中使用样式化组件。

const xCard = chakra('div', {
    themeKey: 'Card'
})

8. 实践案例：注册表单

通过经典的表单案例，完整演示chakra-ui当中的组件要如何去使用。

// SignUp.js
import React from 'react'
import { observer } from 'mobx-react-lite'
import {
  Stack,
  InputGroup,
  InputLeftAddon,
  InputRightAddon,
  FormControl,
  Input,
  FormHelperText,
  RadioGroup,
  Radio,
  Select,
  Flex,
  Switch,
  FormLabel,
  Button
} from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'
import { Center } from '@chakra-ui/react'
function SignUp (props) {
  return (
    <Center mx='25%' minW='20rem'>
      <Stack spacing='4'>
        <FormControl isRequired isDisabled isInvalid>
          <InputGroup>
            <InputLeftAddon children={<FaUserAlt />} />
            <Input placeholder='请输入用户名' />
          </InputGroup>
          <FormHelperText>用户名为必填项</FormHelperText>
        </FormControl>
        <InputGroup>
          <InputLeftAddon children={<FaLock />} />
          <Input placeholder='请输入密码' />
          <InputRightAddon children={<FaCheck />} />
        </InputGroup>
        <RadioGroup defaultValue='0'>
          <Stack spacing='4' direction='row'>
            <Radio value='0'>男</Radio>
            <Radio value='1'>女</Radio>
          </Stack>
        </RadioGroup>
        <Select placeholder='请选择学科'>
          <option value='Java'>Java</option>
          <option value='大前端'>大前端</option>
        </Select>
        <Flex>
          <Switch id='deal' mr='2' />
          <FormLabel htmlFor='deal'>是否已查阅并同意服务协议</FormLabel>
        </Flex>
        <Button colorScheme='teal' w='100%' _hover={
    
    { bgColor: 'tomato' }}>
          注册
        </Button>
      </Stack>
    </Center>
  )
}

export default observer(SignUp)

效果如下：

import React from 'react'
import { observer } from 'mobx-react-lite'
import {
  Image,
  Box,
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Text
} from '@chakra-ui/react'

import SignUp from './SignUp'
import SignIn from './SignIn'
import logo from '../../assets/images/logo192.png'

function UserForm (props) {
  return (
    <Box bgColor='gray.100' p={3} w='100%' boxShadow='lg' borderRadius='lg'>
      <Text as='h3' my='2' align='center' w='auto' fontSize='xl'>
        <Image w='50px' src={logo} verticalAlign='middle' display='inline' />
        React Chakra UI Demo
      </Text>
      <Tabs isFitted>
        <TabList>
          <Tab _focus={
    
    { boxShadow: 'none' }}>注册</Tab>
          <Tab _focus={
    
    { boxShadow: 'none' }}>登录</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <SignUp />
          </TabPanel>
          <TabPanel>
            <SignIn />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  )
}

export default observer(UserForm)

案例颜色模式兼容：

import React from 'react'
import { observer } from 'mobx-react-lite'
import {
  Image,
  Box,
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Text,
  Button
} from '@chakra-ui/react'
import { useColorModeValue, useColorMode } from '@chakra-ui/react'
import SignUp from './SignUp'
import SignIn from './SignIn'
import logo from '../../assets/images/logo192.png'

function UserForm (props) {
  const { colorMode, toggleColorMode } = useColorMode()
  const bgColor = useColorModeValue('gray.200', 'gray.700')
  return (
    <Box bgColor={bgColor} p={3} w='100%' boxShadow='lg' borderRadius='lg'>
      <Button pos='fixed' right='0' bottom='0' onClick={toggleColorMode}>
        切换{colorMode === 'light' ? '暗色' : '浅色'}模式
      </Button>
      <Text as='h3' my='2' align='center' w='auto' fontSize='xl'>
        <Image w='50px' src={logo} verticalAlign='middle' display='inline' />
        React Chakra UI Demo
      </Text>
      <Tabs isFitted>
        <TabList>
          <Tab _focus={
    
    { boxShadow: 'none' }}>注册</Tab>
          <Tab _focus={
    
    { boxShadow: 'none' }}>登录</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <SignUp />
          </TabPanel>
          <TabPanel>
            <SignIn />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  )
}

export default observer(UserForm)