如何在 ReactJS 中实现 Chakra UI？

Chakra UI是一个强大的 React 组件库，由 Segun Adebayo 设计和开发，用于构建前端应用程序。 Chakra UI 带有简单但易于理解的文档，为我们提供了有关如何构建可重用组件的指南，从而减少了构建过程所花费的时间，同时专注于应用程序的其他方面。

Chakra-UI GitHub 存储库有 18600 颗星，并被分叉了 1500 次。在本文中，我们将学习如何在单击 React.js 中的按钮时实现 Chakra-UI 暗模式。

Chakra-UI 的主要特点是：

极简主义
风格系统
可重用性
响应能力

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令。在此示例中，我们将安装 react-icons 以及 3rd 方库。
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
npm i react-icons

编程需要懂一点英语

项目结构：它将如下所示。

项目结构

实现暗模式切换功能：

在App.js文件中，通过导入Flex 、 Spacer 、 VStack和Heading组件来创建基本布局。

VStack：它是一个堆栈组件，用于在垂直方向的 Heading 和 IconButton 元素之间创建空间。
Flex 和 Spacer：用于创建响应式布局，其中子元素占据 100% 的宽度，保持它们之间的间距相等。
Heading：用于渲染标题。

为了实现暗模式切换，Chakra UI 提供了一个名为 useColorMode 的 React 钩子，它让我们可以访问颜色模式以及切换颜色模式。此挂钩将颜色模式存储在 localStorage 中，并在加载页面时使用该值。为了确保我们的颜色模式已启用，我们需要将 ColorModeScript 添加到index.js文件中。 ColorModeScript 的值设置为 light。

App.js

import { IconButton } from "@chakra-ui/button";
import { useColorMode } from "@chakra-ui/color-mode";
import { Flex, VStack, Heading, Spacer } from "@chakra-ui/layout";
import { FaSun, FaMoon } from "react-icons/fa";
   
function App() {
   
  const { colorMode, toggleColorMode } = useColorMode(); 
  const isDark = colorMode === "dark";
  return (
    
      
        GGRestro
        
        : } 
       isRound="true" onClick={toggleColorMode}>
      
    
  );
}
   
export default App;

index.js

import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
   
 ReactDOM.render(
  
   
     
   
   
  ,
  document.getElementById('root')
);

index.js

import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
   
 ReactDOM.render(
  
   
     
   
   
  ,
  document.getElementById('root')
);

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：