介绍

现代化的React UI 框架 Chakra-UI

内置Emotion，是CSS-IN-JS解决方案的集大成者
基于 styled-systems
支持开箱即用的主题功能
默认支持白天、黑夜两种模式
拥有大量功能丰富的且有用的组件
使得响应式设计变得轻而易举
文档清晰全面、查找API方便
适用于用于构建展示给用户的界面
框架在不断的完善

快速上手

下载 Chakra-UI

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

克隆默认主题

Chakra-UI 提供的组件是建立在主题基础之上的，只有引入主题组件才能够使用其他组件

npm install @chakra-ui/theme

主题的引入

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import theme from '@chakra-ui/theme';
import { ChakraProvider, CSSReset } from "@chakra-ui/react";

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
);

Style Props 样式属性

style Props 是用来更改组件样式的，通过为组件传递属性的方式实现。通过传递简化的样式属性以达到提升开发效率的目的。
以下为部分展示 Style Props属性

样式属性	css属性	主题
m,margin	margin	space
mx	margin-left & margin-right	space
my	margin-top& margin-bottom	space
p,padding	padding	space
px	padding-left & padding-right	space
py	padding-top & padding-bottom	space
bg	background	color
bgColor	background-color	color
w,h	width, height	size
boxSize	width & height	size
d	display	none
pos	position	none

运用

import {  Box } from '@chakra-ui/react'
function App() {
  return  <Box w={800} h={400} bgColor="hotpink"></Box>
}
export default App;

主题

颜色模式(color mode)

chakra-ui 提供的组件都支持两种颜色模式，浅色模式(light)和暗色模式(dark).
可以通过 useColorMode 进行颜色模式的更改

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

function App() {
  const { colorMode, toggleColorMode } = useColorMode(); // 解构返回的对象
  return <Box w={800} h={400} bgColor="hotpink">
    <Text>{colorMode}</Text>
    <Button onClick={toggleColorMode} >切换颜色</Button>
  </Box>
}

export default App;

Chakra 将颜色模式存储在 localStorage 中，并使用类名策略来确保颜色模式是持久的

根据颜色模式设置样式

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

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

function App() {
  const { colorMode, toggleColorMode } = useColorMode();
 const bgColor =useColorModeValue('pink', 'skyblue'); // 接收两个参数，浅色模式、暗色模式的色值
  return <Box w={800} h={400} bgColor={bgColor}>
    <Text>{colorMode}</Text>
    <Button onClick={toggleColorMode} >切换颜色</Button>
  </Box>
}
export default App;

强制设置组件颜色模式

使组件不受颜色模式影响，始终保持在某个颜色模式下
LightMode 浅色模式组件，包裹的组件只显示浅色
DarkMode 暗色模式组件，包裹的组件只显示暗色

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

 return <Box w={800} h={400}>
    <Text>{colorMode}</Text>
    <LightMode>
      <Button onClick={toggleColorMode} >切换颜色</Button>
    </LightMode>
  </Box>

颜色模式通用设置

设置默认颜色模式：通过 theme.config.initialColorMode 可以设置应用使用的默认主题.
使用操作系统所使用的颜色模式：通过 theme.config.useSystemColorMode 可以设置将应用的颜色模式设置为操作系统所使用的颜色模式.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import theme from '@chakra-ui/theme'
import { ChakraProvider } from "@chakra-ui/react";

// 设置默认颜色模式
// theme.config.initialColorMode = 'dark'
// 使用操作系统使用的颜色模式
theme.config.useSystemColorMode = true

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
);

主题对象

主题对象theme 下包含一些预设属性

颜色 (colors)

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

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

function App() {
  return <Box w={800} h={400} bgColor="gray.300">
    chakra ui
  </Box>
}
export default App;

间距（Space）

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

// 这里的预设值单位为rem，数值从0开始，以0.25rem递增，如（0:0 、 1:"0.25rem"）
// mb="5" 表示 margin-bottom: 1.25rem; 
return <Box w={800} h={400} bgColor="gray.300" mb="5"> chakra ui </Box>

大小（sizes）

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

return <Box w="2xs" h="10" bgColor="gray.300" mb="5">chakra ui</Box>

响应式断点(Breakpoints)

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

// theme.js
export default {
  breakpoints: ["30em", "48em", "62em", "80em"] ,
};

return <Box w={["100px","200px","300px","800px"]} h="10" bgColor="gray.300" mb="5" mt="6">
    chakra ui
  </Box>

创建标准的Chakra-Ul组件

chakra-factory

利用 charka方法

import { chakra } from '@chakra-ui/react';
const LGButton = chakra('button', {
  baseStyle: {

  },
})
function App() {
  return (
    <div>
     //直接以chakra.<element> 可以传递charka样式的纯html
      <chakra.button bg="red.100" px="3" py="2">chakra.button</chakra.button>

      <MyButton variant="primary" size="sm">自定义按钮</MyButton>
    </div>
  )
}
export default App;