Chakra-UI 学习笔记

chakra-ui介绍

Chakra UI 是⼀个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React 应⽤所需的UI组件.

⽂档: 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. 框架正在变得越来越完善

下载 chakra-ui

chakra-ui官网：https://chakra-ui.com/

npm i @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/core'

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

Style Props 样式属性

网址：https://chakra-ui.com/docs/features/style-props

Style Props 是⽤来更改组件样式的, 通过为组件传递属性的⽅式实现. 通过传递简化的样式属性以达到提升开发效率的⽬的.

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

// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>

// You can also use custom values
<Box maxW="960px" mx="auto" />

// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[2, 3]} />

Prop	CSS Property	Theme Key
m, margin	margin	space
mt, marginTop	margin-top	space
mr, marginRight	margin-right	space
mb, marginBottom	margin-bottom	space
ml, marginLeft	margin-left	space
mx	margin-left and margin-right	space
my	margin-top and margin-bottom	space
p, padding	padding	space
pt, paddingTop	padding-top	space
pr, paddingRight	padding-right	space
pb, paddingBottom	padding-bottom	space
pl, paddingLeft	padding-left	space
px	padding-left and padding-right	space
py	padding-top and padding-bottom	space

Style Props 样式属性

Style Props 是⽤来更改组件样式的, 通过为组件传递属性的⽅式实现. 通过传递简化的样式属性以达到提升开发效率的⽬的.

注意react17用的是@chakra-ui/react

react16是@chakra-ui/core

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

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

export default App;

主题颜色

chakra-ui 提供的组件都⽀持两种颜⾊模式, 浅⾊模式(light)和暗⾊模式(dark)

可以通过 useColorMode 进⾏颜⾊模式的更改.

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

function App() {
  const {colorMode, toggleColorMode} = useColorMode();
  return <Box w="200px" h="100px" bgColor={colorMode === 'light' ? 'tomato':'skyblue'}>
    <Text>当前的颜色模式是{colorMode}</Text>
    <Button onClick={toggleColorMode}>切换颜色模式</Button>
  </Box>
}

export default App;

Chakra 将颜⾊模式存储在 localStorage 中, 并使⽤类名策略来确保颜⾊模式是持久的.

根据颜⾊模式设置样式

chakra 允许在为元素设置样式时根据颜⾊模式产⽣不同值. 通过 useColorModeValue 钩⼦函数实现.

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

function App() {
  const {colorMode, toggleColorMode} = useColorMode();
  const bgColor= useColorModeValue('tomato', 'skyblue');
  return <Box w="200px" h="100px" bgColor={bgColor}>
    <Text>当前的颜色模式是{colorMode}</Text>
    <Button onClick={toggleColorMode}>切换颜色模式</Button>
  </Box>
}

export default App;

强制组件颜⾊模式

使组件不受颜⾊模式的影响, 始终保持在某个颜⾊模式下的样式.

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

function App() {
  const {colorMode, toggleColorMode} = useColorMode();
  const bgColor= useColorModeValue('tomato', 'skyblue');
  return <Box w="200px" h="100px" bgColor={bgColor}>
    <Text>当前的颜色模式是{colorMode}</Text>
      <LightMode>
        <Button onClick={toggleColorMode}>切换颜色模式</Button>
      </LightMode>
  </Box>
}

export default App;

颜⾊模式通⽤设置

1. 设置默认颜⾊模式

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

theme.config.initialColorMode = 'dark'

2. 使⽤操作系统所使⽤的颜⾊模式

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

主题对象

1. Colors

   在设置颜⾊时, 可以但不限于取主题中提供的颜⾊值.

    <Box w="200px" h="100px" bgColor="gray.500">
   

   2. Space

      使⽤ space 可以⾃定义项⽬间距. 这些间距值可以由 padding, margin 和 top, left, right, bottom 样式引⽤.

      <Box mb='5'></Box> <!-- 5 => 1.25rem-->
      

   3. Sizes

   使⽤ size 可以⾃定义元素⼤⼩, 这些值可以由 width, height 和 maxWidth, minWidth 等样式引⽤.
   
   ```jsx
   <Box w='lg'></Box>  <!-- lg => 32rem-->
   ```
   

   4. Breakpoints

      配置响应数组值中使⽤的默认断点. 这些值将⽤于⽣成移动优先(即最⼩宽度)的媒体查询.

       <Box mt="6" w={["100px","300px","500px","1000px"]} >
       </Box>
      

创建标准的 Chakra-UI 组件

1. 创建 Chakra-UI 组件

   import React from "react";
   import { chakra } from '@chakra-ui/react'
   
   const LaGouButton = chakra('button', {
     baseStyle: {
       borderRadius: 'lg'
     },
     sizes: {
       sm: {
         px: '3',
         py: '1',
         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 size="md" variant="danger">button</LaGouButton>
     </div>
   }
   
   export default App;
   

2. 全局化 Chakra-UI 组件样式

   a. 在 src ⽂件夹中创建 lagou ⽂件夹⽤于放置⾃定义 Chakra-UI 组件

   b. 在 lagou ⽂件夹中创建 button.js ⽂件并将组件样式放置于当前⽂件中并进⾏默认导出

   const LaGouButton = {
     baseStyle: {
       borderRadius: 'lg'
     },
     sizes: {
       sm: {
         px: '3',
         py: '1',
         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;
   

   c. 在 lagou ⽂件夹中创建 index.js ⽂件⽤于导⼊导出所有的⾃定义组件

   import LaGouButton from './button';
   
   export default {
     LaGouButton
   }
   

   d. 在 src ⽂件夹中的 index.js ⽂件中导⼊⾃定义 Chakra-UI 组件并和 components 属性进⾏合并

   import LaGouComponents from './LaGou';
   
   console.log(theme);
   
   const myTheme = {
     ...theme,
     components: {
       ...theme.components,
       ...LaGouComponents
     }
   
   

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

   const LaGouButton = chakra('button', {
     themeKey: 'LaGouButton'
   });
   
   

​