Chakra-UI——React UI 框架

介绍

现代化的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 MyButton = chakra('button', {
  baseStyle: { // 设置一些默认样式
    bg: 'red.200'
  }
})
function App() {
  return (
    <div>
     //直接以chakra. 可以传递charka样式的纯html
      <chakra.button bg="red.100" px="3" py="2">chakra.button</chakra.button>
      <MyButton>按钮</MyButton>
    </div>
  )
}
export default App;

extendTheme （主题扩展的形式）

• 通过提供的extendTheme方法来扩展 theme（主题），添加一些风格化样式

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react'
import { extendTheme } from '@chakra-ui/react'
const theme = extendTheme({
  components: {
    Button: {
      variants: {
        primary: {
          bgColor: 'blue.500',
          color: 'white'
        },
        danger: {
          bgColor: 'red.500',
          color: 'white'
        }
      }
    }
  },
})
ReactDOM.render(
    <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
);

• App.js

import { Button } from '@chakra-ui/react';
function App() {
  return (
    <div>
      <Button variant="primary">主题扩展按钮</Button>
    </div>
  )
}
export default App;

自定义组件

• 在这里自定义一个card组件

//card.theme.js
import type { ComponentStyleConfig } from '@chakra-ui/theme'

const Card: ComponentStyleConfig = {
  baseStyle: {
    display: 'flex',
    flexDirection: 'column',
    background: 'white',
    alignItems: 'center',
    gap: 6,
  },
  variants: {
    rounded: {
      padding: 8,
      borderRadius: 'xl',
      boxShadow: 'xl',
    },
    smooth: {
      padding: 6,
      borderRadius: 'base',
      boxShadow: 'md',
    },
  },
  defaultProps: {
    variant: 'smooth',
  },
}

export default Card

• 将自定义的card样式扩展到主题

// theme.js
import { extendTheme } from '@chakra-ui/react';
import Card from './card.theme';
const theme = extendTheme({
  components: {
    Card
  },
})

export default theme

• 我们自己创建的Card 组件并不是 Chakra UI 的一部分，所以使用 useStyleConfig 钩子来实现

// themeKey 我们扩展到主题theme的 card，
const styles = useStyleConfig(themeKey, props)

// card.js
import { useStyleConfig, Box } from '@chakra-ui/react'

const MyCard = function   (props) {
  const { variant, ...rest } = props
  const styles = useStyleConfig('Card', { variant })
  return <Box __css={styles} {...rest} />
}
export default MyCard

import { MyCard } from './LG/index';
function App() {
  return (
      <MyCard>卡片</MyCard>
  )
}
export default App;