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

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

• Red

• Orange

• Yellow

• Green

• Teal

• Blue

• Cyan

• Purple

• Pink

6.2 间距 Space

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

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组件样式

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

2. 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

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

import Card from './card"

export default {
    Card
}

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

import xxxComponents from './xxx'

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

5. 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)

案例颜色模式兼容：文章来源地址https://www.toymoban.com/news/detail-737468.html

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)