Chakra-UI 学习笔记

Chakra-UI 学习笔记

文章出处： 拉 勾 大前端 高薪训练营

现代化 React UI 框架 Chakra-UI

1. Chakra-UI 介绍

Chakra UI是一个简单的，模块化的易于理解的UI组件库.提供了丰富的构建React应用所需的U|组件.
文档: https://next.chakra-ui.com/docs/getting-started

1. Chakra UI内置Emotion,是CSS-IN-JS解决方案的集大成者
2. 基于Styled-Systems https://styled-system.com/
3. 支持开箱即用的主题功能
4. 默认支持白天和黑夜两种模式
5. 拥有大量功能丰富且非常有用的组件
6. 使响应式设计变得轻而易举
7. 文档清晰而全面.查找API更加容易
8. 适用于构建用于展示的给用户的界面
9. 框架正在变得越来越完善

2. Chakra-UI 快速开始

2.1 下载 Chakra-UI

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

  

 

  
1
 

2.2 克隆默认主题

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

npm install @chakra-ui/theme

  

 

  
1
 

2.3 引入主题

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"

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

2.4 依赖清单

{
  "name": "chakra-ui-guide",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^1.0.4",
    "@chakra-ui/theme": "^1.2.2",
    "@emotion/react": "^11.1.3",
    "@emotion/styled": "^11.0.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "framer-motion": "^3.1.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
 

2.5 引用组件

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

function App() {
  return (
    <div>
      <Button>submit</Button>
    </div>
  );
}

export default App;

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

3. Style Props 样式属性

Style Props 是用来更改组件样式的，通过为组件传递属性的方式实现。通过传递简化的样式属性一达到提升开发效率的目的。可以在https://chakra-ui.com/docs/features/style-props查看样式简写

如何使用：

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

function App() {
  return (
    <div>
      <Box w={256} h={200} bg='tomato'>Box</Box>
    </div>
  );
}

export default App;


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

4. 主题

4.1 颜色模式（color mode）

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

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

function App() {
  const {colorMode, toggleColorMode} = useColorMode() // 注意这里是对象解构，不是数组解构
  return (
    <Box w={256} h={200} bg='tomato'>
      <Text>当前的颜色模式为 {colorMode}</Text>
      <Button onClick={toggleColorMode}>切换颜色模式</Button>
    </Box>
  );
}

export default App;


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

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

4.2 根据颜色模式设置样式

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

import { Box, useColorModeValue } from '@chakra-ui/react'
const bg = useColorModeValue('tomato', 'skyblue')

<Box w={256} h={200} bg={bg}></Box>

  

 

  
1
  
2
  
3
  
4
 

4.3 强制组件颜色模式

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

import { Button, LightMode } from '@chakra-ui/react'
<LightMode>
  <Button onClick={toggleColorMode}>切换颜色模式</Button>
</LightMode>

  

 

  
1
  
2
  
3
  
4
 

4.4颜色模式通用设置

1. 设置默认颜色模式
   通过 theme.config.initialColorMode 可以设置应用使用的默认主题.

2. 使用操作系统所使用的颜色模式
   通过 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"

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

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

4.5 主题对象

1. Colors

在设置颜色时，可以但不限于取主题对象中的颜色值

function App() {
  return <Box w={200} h={200} bg="cyan.500"></Box>
}

  

 

  
1
  
2
  
3
 

2. Space

使用 space 可以自定义项目间距。这些间距值可以由 width, height 和 maxWidth, minWidth 等样式引用

<Box mt={6} w="lg" h="2xl" ></Box> <!-- lg => 32rem -->

  

 

  
1
 

3. Breakpoints

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

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

  

 

  
1
  
2
  
3
  
4
 

<Box fontSize={["12px", "14px", "16px", "18px", "20px"]}></Box>

  

 

  
1
 

4.6 创建标准的Chakra-Ul组件

1. 创建 Chakra-Ul 组件

import {chakra} from '@chakra-ui/react'
const LaGouButton = chakra("button", {
  baseStyle: {
    borderRadius: 'lg'
  },
  sizes: {
    sm: {
      px: '3', // padding-left/padding-right
      py: '1', // padding-right/padding-bottom
      fontSize: '12px'
    },
    md: {
      px: '4',
      py: '2',
      fontSize: '14px'
    }
  },
  variants: { // 风格化样式
    primary: {
      bgColor: 'blue.500',
      color: 'white'
    },
    danger: {
      bgColor: 'red.500',
      color: 'white'
    }
  }
});

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

function App() {
  return (
    <div>
      <LaGouButton> 按钮 </LaGouButton>
    </div>
  )
}

export default App;

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
 

2. 全局化Chakra-UI组件样式
   a. 在 src 文件夹中创建 LaGou 文件夹用于放置自定义Chakra-UI组件
   b. 在 lagou 文件夹中创建 Button.js 文件并将组件样式放置于当前文件中并进行默认导出

const LaGouButton = {
  baseStyle: {
    borderRadius: 'lg'
  },
  sizes: {
    sm: {
      px: '3', // padding-left/padding-right
      py: '1', // padding-right/padding-bottom
      fontSize: '12px'
    },
    md: {
      px: '4',
      py: '2',
      fontSize: '14px'
    }
  },
  variants: { // 风格化样式
    primary: {
      bgColor: 'blue.500',
      color: 'white'
    },
    danger: {
      bgColor: 'red.500',
      color: 'white'
    }
  },
  defaultProps: {
    size: 'sm',
    variant: 'primary'
  }
}

export default LaGouButton

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
 

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

import LaGouButton from './Button'

export default {
  LaGouButton
}

  

 

  
1
  
2
  
3
  
4
  
5
 

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

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"
import LaGouComponents from './LaGou'

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

console.log(myTheme)

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
 

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

import {chakra} from '@chakra-ui/react'
const LaGouButton = chakra("button", {
  themeKey: 'LaGouButton'
});


function App() {
  return (
    <div>
      <LaGouButton> 按钮 </LaGouButton>
    </div>
  )
}

export default App;

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

文章来源: blog.csdn.net，作者：爱玲姐姐，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/jal517486222/article/details/112257200