Chakra-UI 学习笔记

最新推荐文章于 2024-08-20 15:28:14 发布

爱玲姐姐

最新推荐文章于 2024-08-20 15:28:14 发布

阅读量2.9k

点赞数 9

分类专栏：大前端 React 文章标签： React Chakra-UI

本文链接：https://blog.csdn.net/jal517486222/article/details/112257200

版权

本文详细介绍了Chakra-UI，一个React UI框架，包括其设计理念、快速入门步骤、Style Props和主题定制。Chakra-UI提供模块化组件，支持颜色模式切换，简化了响应式设计，并允许开发者根据颜色模式设置组件样式。

摘要由CSDN通过智能技术生成

Chakra-UI 学习笔记

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

现代化 React UI 框架 Chakra-UI

1. Chakra-UI 介绍

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

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

2. Chakra-UI 快速开始

2.1 下载 Chakra-UI

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

2.2 克隆默认主题

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

npm install @chakra-ui/theme

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')
);

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":