Chakra-ui — 比antd更具自由度

介绍

Chakra-ui是专门用于react开发的现代化结构。其官方地址为：https://next.chakra-ui.com/docs/getting-started

特色

• 内置Emotion库，天然支撑css-in-js解决方案
• 依据Styled-Systems
• 支撑开箱即用的主题功能
• 默许支撑白天和黑夜两种主题款式
• 具有大量功能丰厚并且十分有用的组件
• 使得呼应式的设计变得十分轻松
• 完整可用的文档
• 特别适合构建给用户展现的页面
• 结构活跃度高，目前还在活跃保护中

下载

npm install @chakra-ui/core@1.0.0-next.x
npm isntall @chakra-ui/theme

这儿需求着重的是，chakra的ui组件依据主题款式，所以必须首先引进主题。

基本运用

运用主题的结构和款式重置

import { ChakraProvider } from '@chakra-ui/core';
import theme from '@chakra-ui/theme';
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

一般来说还需求重置款式：

import { ChakraProvider， CSSReset } from '@chakra-ui/core';
import theme from '@chakra-ui/theme';
<ChakraProvider theme={theme}>
  <CSSReset />
  <App />
</ChakraProvider>

Style Props列表

chakra中的组件都支撑运用props直接设置款式的行为，下表展现的是常用的一些style props:

运用举例：

import {Box} from '@chakra-ui/core';
<Box w={200} h={200} bg='tomato' p='3px'> Hello chakra-ui </Box>

主题的运用

chakra供给了名为useColorMode的钩子函数，此钩子函数执行之后回来当时的主题和改动主题的办法。

import { useColorMode } from '@chakra-ui/core';
const [colorMode, toggleColorMode] = useColorMode();
<Text>当时的颜色形式为{colorMode==='light'?'light':'dark'}</Text>
<Button onClick={toggleColorMode}>切换颜色形式</Button>

明显colorMode能够成为三目表达式的判别条件，以此条件判别能够定制在light或者dark形式下页面的显现状况的不同。

而同toggleColorMode办法执行的结果就是在light和dark形式两者之间进行切换。

注意：chakra-ui对主题的切换是会同步到localStorage中的，也就是组件内部自动封装好了耐久化；这意味着浏览器刷新之后当时的形式仍然是生效的

上面运用三元表达式定制不同形式下的款式的做法显得不是很好，实践上组件供给了另外的钩子函数useColorModeValue，其间封装了对当时形式的判别：

import { useColorModeValue } from '@chakra-ui/core';
...
const bgColor = useColorModeValue(lightValue, darkValue);
<Box bgColor={bgColor}></Box>

强制主题

假如运用了chakra中供给的封装组件，那么在mode切换的时分，在默许情况下，这些组件的款式也会相应的做出改动。有的时分或许会有如下的需求：

• 不管子啊light仍是dark形式下都想要运用light下的主题配色，这个时分就能够运用chakra供给的<lightMode>组件了。被此组件包裹的内容不会再收到mode切换的影响，将会强制运用light形式下的配色。

import {LightMode, DarkMode } from '@chakra-ui/core';
<LightMode>
    <Button onClick={toggleColorMode}>尝试切换主题颜色</Button>
</LightMode>

设置默许主题

chakra供给了两种设置默许主题的办法：’自界说’和’与操作系统风格坚持一致’

自界说默许主题

在根组件的return办法前面经过theme.config.initialColorMode进行设置，值为’light’|’dark’。

import theme from "@chakra-ui/theme";
theme.config.initialColorMode = 'dark';
ReactDOM.render(
  <ChakraProvider theme={myTheme}>
    <CSSReset />
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);

主题跟从操作系统

在根组件的return办法前面经过theme.config.useSystemColorMode进行设置，值为boolean类型的。

import theme from "@chakra-ui/theme";
theme.config.useSystemColorMode = true;
ReactDOM.render(
  <ChakraProvider theme={myTheme}>
    <CSSReset />
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);

主题目标

下面以主题中供给的颜色为例阐明chakra中的主题目标。

1. Colors — 界说颜色和布景色

运用方法： <Box></Box>

2. Space — 界说布局间隔

运用space能够自界说项目之间的间隔，这些间隔能够供padding margin top left right bottom等特点运用 <Box mb='5'></Box> // 这儿的5表明的意义实践上是5*0.25rem的意思

3. Sizes — 界说尺度巨细

运用sizes目标能够自界说元素的巨细，sizes能够由width height max-width min-height等特点运用。 <Box x='lg'></Box> // 这儿的lg表明的实践上是32rem的意思

4. BreakPoints — 界说媒体查询

breakPoints的作用是：装备呼应数组中运用的默许断点，这些值将用于生成移动优先的媒体查询。

在theme.js中能够看到如下的代码：

export default {
    breakPoints: ['30em', '48em', '62em', '80em'],
}

上面的代码所表明的意义其实是在宽度为’30em’, ’48em’, ’62em’, ’80em’时分进行的媒体查询。与此对应的运用方法为：

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

其间，12px表明的是不进行媒体查询的时分的默许值，而剩下的数值恰好与theme.js中的媒体查询一一对应。

自界说Chakra-ui组件

尽管chakra-ui中供给了较为丰厚的组件，可是许多时分还需求开发者自己封装符合项目风格的自界说组件，这个时分就能够运用供给的chakra办法来完成封装的需求。

下面是一个自界说chakra组件的基本结构：

// step 1
const options = {
    baseStyle:{},
    sizes:{},
    variants:{},
};
// step 2
const MyButton = chakra("button", options);
// step 3
MyButton.defaultProps = {};
// step 4
<MyButton>我的自界说按钮</MyButton>

下面完善此结构：

// 导入React库，用于构建React组件
import React from 'react'; 
// 从Chakra UI库导入chakra函数，用于创立款式化组件
import { chakra } from '@chakra-ui/core'; 
// 运用chakra函数创立一个自界说的MyButton按钮组件
const MyButton = chakra('button', {
    baseStyle: { // 设置组件的根底款式
        borderRadius: 'lg', // 圆角设置为大(large)
    },
    sizes: { // 为不同的尺度设定款式
        sm: {  
            px: '3',       // 设置水平内边距（左右内边距）
            py: '1',       // 设置笔直内边距（上下内边距）
            fontSize: '12px', // 设定字体巨细为12px
        },
        md: {  
            px: '4',      // 设置水平内边距为4（左右内边距）
            py: '2',      // 设置笔直内边距为2（上下内边距）
            fontSize: '14px', // 设定字体巨细为14px
        },
    },
    variants: { // 为按钮界说变体，依据variant特点的不同运用不同的款式
        primary: {
            bgColor: 'blue.500', // 首要变体的布景颜色为500级其他蓝色
            color: 'white',      // 字体颜色为白色
        },
        danger: {
            bgColor: 'red.500',  // 风险变体的布景颜色为500级其他红色
            color: 'white',      // 字体颜色为白色
        }
    },
});
// 设置MyButton的默许特点值
MyButton.defaultProps = {
    size: 'sm',     // 默许尺度为小(sm)
    variant: 'primary', // 默许变体为首要(primary)
}
// 界说App组件
function App () {
    return (
        // 回来组件的JSX结构
        <div>
            {/* 运用MyButton并传递size和variant特点，分别设置为中等巨细（md）和风险变体（danger） */}
            <MyButton size='md' variant='danger'></MyButton>
        </div>
    )
}

自界说大局Chakra-ui组件

上述自界说组件的方法是比较“浅”或者说“灵敏”的定制方法，可是项目中还存在着一部分需求大局通用的定制化组件，那么该如何做好这部分的基建呢？实践上，chakra-ui也供给了相应的自界说组件的挂载方法，使得开发者自界说的组件做到：一次挂载，处处运用

1. 工程化结构

mkdir -p src/chakra-ui
touch src/chakra-ui/index.js src/chakra-ui/button.js

2. 构建公共组件

// button.js
const MyButton = {
  baseStyle: {},
  sizes: {},
  variants: {},
  defaultProps: {},
};
export default MyButton;

一致导入导出：

import MyButton from './button';
export default {
    MyButton,
}

3. 在Provider的theme目标上挂载公共组件

import MyComponents from '@/chakra-ui'; // @表明的是src目录的绝对路径
const myTheme = {
    ...theme,
    components: {
        ...theme.components,
        ...MyComponents,
    }
}
<ChakraProvider theme={myTheme}>{...}</ChakraProvider>

4. 在恣意方位经过themeKey字段指定/运用自界说组件

const MyButton = chakra('button', {
    themeKey: 'MyButton',
})
function App () {
    return (
        <div>
            <MyButton size='md' variant='danger'>我的定制按钮</MyButton>
        </div>
    )
}

chakra-ui归纳练习–制造一个登录表单

这个练习的意图是为了将上面的知识点串联起来，模拟实践项目开发过程中的场景。

1. 结构建立

npx create-react-app chakra-ui-demo
cd chakra-ui-demo
rm -rf src/
mkdir -p src/assets/images
mkdir src/components
touch src/index.js
cd src/components
touch App.js Form.js Header.js Home.js Main.js SignIn.js SignUp.js
cd ../../

2. src/index.js入口文件中的内容

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { ChakraProvider, CSSReset } from "@chakra-ui/core";
import App from "./components/App";
import theme from '@chakra-ui/theme';
ReactDOM.render(
  <Router>
    <ChakraProvider theme={theme}>
      <CSSReset />
      <App />
    </ChakraProvider>
  </Router>,
  document.getElementById("root")
);

3. src/components/App.js视图根组件中的内容

import React from "react";
import Header from "./Header";
import Main from "./Main";
function App() {
  return (
    <>
      <Header />
      <Main />
    </>
  );
}
export default App;

4. src/components/Header.js页面结构布局组件中的内容

// 导入React根底库
import React from "react";
// 从chakra-ui/core中导入所需的组件
import {
  Box,        // 用于布局的容器组件
  Stack,      // 用于水平或笔直摆放子元素的组件
  Image,      // 用于展现图片的组件
  Button,     // 按钮组件
  useColorMode, // 用于获取和切换颜色形式的Hook函数
} from '@chakra-ui/core';
import { Link } from 'react-router-dom'; // 用于运用内导航的Link组件
import logo from "../assets/images/logo.png"; // 导入logo图片
// 界说并导出Header组件
export default function Header() {
  // 运用useColorMode Hook获取当时颜色形式及切换函数
  const { colorMode, toggleColorMode } = useColorMode();
  // 回来JSX结构
  return (
    // 包裹Header的最外层Box组件，设置高度和布景颜色
    // 依据当时颜色形式，动态设置布景颜色
    <Box
      h="60px"
      bg={colorMode === "light" ? "gray.200" : "gray.700"}>
      {/* 创立一个用于内容居中的容器Box */}
      <Box
        w="80%"     // 容器宽度为80%
        m="auto"    // 自动外边距完成水平居中
        overflow="hidden"> // 防止子元素溢出容器
        {/* Logo图片，浮动到左边 */}
        <Image
          float="left"   // 图片左浮动
          mt="10px"      // 间隔顶部间隔
          w="40px"       // 图片宽度
          src={logo} />  // 图片资源路径
        {/* 网站导航栏组件Stack */}
        <Stack
          spacing={8}       // 子元素直接的空地
          direction="horizontal" // 水平摆放
          ml={8}            // 设定左外边距，与Logo坚持一定间隔
          h="60px"          // 栈的高度与外围Box坚持一致
          float="left"      // 浮动居左，和Logo在一行
          align="center"    // 子元素笔直居中对齐
        >
          {/* 运用Link组件完成SPA的内部跳转 */}
          <Link to="/home">主页</Link>
          <Link to="/form">表单</Link>
          <Link to="/card">卡片</Link>
        </Stack>
        {/* 切换颜色形式的按钮 */}
        <Button
          colorScheme="teal"   // 运用teal主题颜色
          float="right"        // 按钮浮动到右侧
          mt="10px"            // 间隔顶部间隔
          onClick={toggleColorMode} // 点击时切换颜色形式
        >
          切换形式
        </Button>
      </Box>
    </Box>
  );
}

5. src/components/Main.js路由根组件中的内容

import React from "react";
import { Route } from "react-router-dom";
import { Box } from "@chakra-ui/core";
import Form from "./Form";
import Card from "./Card";
export default function Main() {
  return (
    <Box w={1 / 2} mx="auto" mt="100px" d="flex" justifyContent="center">
      <Route path="/form" component={Form} />
      <Route path="/card" component={Card} />
    </Box>
  );
}

6. src/components/Card.js页面组件中的内容

// 导入React根底库
import React from "react";
// 导入Chakra UI组件库中的组件
import { 
  Box,       // 用于布局的容器组件
  Image,     // 图片显现组件
  Badge,     // 标签组件，用于显现小徽章或者符号
  Text,      // 文本组件，显现各种文本内容
  Stack,     // 用于布局的组件，可水平或笔直堆叠子组件
  Flex,      // Flexbox布局组件，用于创立灵敏的布局
  Button,    // 按钮组件
  useColorMode // Hook，用于获取当时的颜色形式以及切换颜色形式的函数
} from "@chakra-ui/core";
import chakraUI from "../assets/images/chakra-ui.png"; // 导入图像资源
import { AiFillStar } from "react-icons/ai"; // 导入星星图标，用于评级等
// 界说Card组件并导出
export default function Card() {
  // 运用useColorMode Hook获取当时颜色形式
  const {colorMode} = useColorMode();
  // 界说淡色和深色形式下布景色和文本颜色的装备
  let bgColor = {light: 'gray.200', dark: 'gray.700'};
  let textColor = {light: 'gray.500', dark: 'gray.100'};
  // 组件回来JSX结构
  return (
    // 外层容器Box用于整个卡片的布局
    <Box
      w={1 / 2}             // 卡片宽度为父容器的一半
      overflow="hidden"     // 溢出部分躲藏
      borderRadius="lg"     // 圆角
      boxShadow="lg"        // 暗影作用
      bgColor={bgColor[colorMode]} // 依据颜色形式设置布景颜色
    >
      {/* 图片组件Image显现chakra UI的logo */}
      <Image src={chakraUI} />
      {/* Box容器用于包裹内容部分，设置内边距 */}
      <Box p={3}>
        {/* 水平布局的Stack，用于布局徽章和描绘 */}
        <Stack direction="horizontal" align="center">
          {/* 多个徽章Badge，显现各种符号，设置特定的颜色主题和四周圆角 */}
          <Badge variant="solid" colorScheme="teal" borderRadius="full" px={2}>
            NEW
          </Badge>
          <Badge variant="solid" colorScheme="teal" borderRadius="full" px={2}>
            Chakra-UI
          </Badge>
          <Badge variant="solid" colorScheme="teal" borderRadius="full" px={2}>
            React
          </Badge>
          {/* 文本组件Text，显现附加描绘 */}
          <Text fontSize="sm" color={textColor[colorMode]}>
            周一去打工，一起呀
          </Text>
        </Stack>
        {/* 标题文本 */}
        <Text
          as="h2"               // 设置为h2的HTML元素
          color={textColor[colorMode]} // 依据颜色形式设置文本颜色
          fontWeight="semibold" // 设置字体粗细
          fontSize="xl"         // 设置字号巨细
          mt="3"                // 设置上外边距
          mb="2"                // 设置下外边距
        >
          Chakra-UI 学习笔记
        </Text>
        <Text fontWeight="light" fontSize="sm" lineHeight="tall">
          { /* 文章内容描绘 */ }
          Chakra UI 是一个简略的, 模块化的易于了解的 UI 组件库. 供给了丰厚的构建
          React 运用所需的UI组件. 在整个运用程序中，在任何组件上快速、轻松地引证主题中的值。组件的构建考虑到了组合。你能够利用任何组件来发明新事物。Chakra-UI 严厉遵从WAI-ARIA规范。一切组件都有恰当的特点和现成的键盘交互。Chakra UI 是一个简略的, 模块化的易于了解的 UI 组件库. 供给了丰厚的构建 React 运用所需的UI组件.
        </Text>
        {/* 星星评级和评论统计的Flex容器布局 */}
        <Flex py="2" align="center" fontSize="sm">
          {/* 星星图标，用AiFillStar组件表明，显现为teal颜色组 */}
          <Flex color="teal.500">
            <AiFillStar />
            <AiFillStar />
            <AiFillStar />
            <AiFillStar />
          </Flex>
          <AiFillStar />
          <Text ml={1}>300 评论</Text>
        </Flex>
      </Box>
      {/* 底部登录按钮，设置为占满整个卡片宽度 */}
      <Button colorScheme="teal" w="100%">登录</Button>
    </Box>
  );
}

7. src/components/Form.js表单组件中的内容

// 引进React库
import React from "react";
// 引进Chakra UI库供给的多个组件
import {
  Box,         // 用于布局的盒子组件
  Image,       // 用于显现图片的组件
  Tabs,        // 用于创立标签页的容器组件
  TabList,     // 用于包裹Tab组件的列表容器
  Tab,         // 单个标签页的按钮组件
  TabPanels,   // 用于包裹TabPanel的容器
  TabPanel,    // 标签面板的组件，对应一个Tab
  useColorMode // 用于获取当时颜色形式和切换颜色形式的钩子（hook）
} from "@chakra-ui/core";
// 引进注册和登录组件
import SignUp from "./SignUp";
import SignIn from "./SignIn";
// 引进两种颜色形式下的Chakra UI相关的logo图片
import chakraLogoDark from "../assets/images/chakra-ui-dark.png"; // 深色形式logo
import chakraLogoLight from "../assets/images/chakra-ui-light.png"; // 淡色形式logo
// 界说Form组件并导出
export default function Form() {
  // 运用useColorMode钩子获取当时的颜色形式
  const { colorMode } = useColorMode();
  // 组件回来的JSX内容
  return (
    // 最外层的布局容器Box，设置布景色、内边距、暗影作用、圆角和宽度
    <Box
      bg={ // 依据colorMode动态设置布景色
        colorMode === "light" ? "gray.200" : "gray.700"
      }
      p={5} // 设置内边距
      boxShadow="md" // 设置中等强度的暗影
      borderRadius="lg" // 设置大圆角
      w="100%" // 设置宽度为100%
    >
      // Image组件用于显现logo图片
      <Image
        w={250} // 设置图片宽度
        mx="auto" // 设置水平外边距自动，以完成水平居中
        mb={6} // 设置下外边距
        mt={2} // 设置上外边距
        src={colorMode === "light" ? chakraLogoLight : chakraLogoDark} // 依据颜色形式动态设置图片来历
      />
      // Tabs组件用于创立标签页功能
      <Tabs isFitted> // isFitted特点意味这个标签页会填充整个容器宽度
        // TabList组件包裹多个Tab组件，作为标签页的标题列表
        <TabList>
          // Tab组件代表单个标签页的标题
          <Tab _focus={{ boxShadow: "none" }}>注册</Tab> // 运用_focus内联款式去掉焦点状况下的暗影
          <Tab _focus={{ boxShadow: "none" }}>登录</Tab>
        </TabList>
        // TabPanels组件包裹多个TabPanel组件，作为每个标签页面板的内容容器
        <TabPanels>
          // 每个TabPanel对应一个Tab，里面能够放置任何内容
          <TabPanel>
            <SignUp /> // 注册组件内容
          </TabPanel>
          <TabPanel>
            <SignIn /> // 登录组件内容
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}

7.1 登录子组件中的内容

// 引进React根底库
import React from "react";
// 引进Chakra UI中用于表单的组件
import {
  Input,              // 文本框组件，答应用户输入信息
  Stack,              // 堆叠布局组件，用于按序摆放子组件
  InputGroup,         // 输入框组群组件，用于将几个表单元素组合在一起
  InputLeftAddon,     // 输入框左边的前置标签组件
  InputRightAddon,    // 输入框右侧的后置标签组件
  FormControl,        // 用于表单控件的容器，供给有效性和禁用状况款式
  Button,             // 按钮组件，可用于提交表单或其他交互
  FormHelperText,     // 供给表单协助或指示信息的文本组件
} from "@chakra-ui/core";
// 引进React Icons库中的图标
import { FaUserAlt, FaLock, FaCheck } from "react-icons/fa";
// 界说并导出SignIn组件
export default function SignIn() {
  // 组件回来的JSX内容
  return (
    <form>  // 用HTML的form标签包裹整个表单，这个标签在Web开发中用于收集用户输入
      <Stack spacing={5}>  // 运用Stack组件来笔直堆叠内部元素，spacing特点设置堆叠元素间的间隔
        <FormControl isDisabled isInvalid>  // 运用FormControl组件包裹输入框，isDisabled禁用输入，isInvalid表明输入无效状况
          <InputGroup>  // InputGroup组件用来将输入框和前置/后置元素组织在一起
            <InputLeftAddon children={<FaUserAlt />} />  // InputLeftAddon作为前置标签，嵌入用户图标
            <Input placeholder="请输入用户名" />  // Input组件用于用户名输入，placeholder特点供给无内容时的提示文字
          </InputGroup>
          <FormHelperText>用户名是必填选项</FormHelperText>  // FormHelperText供给额定的协助信息或提示
        </FormControl>
        // 第二个输入组：暗码输入框，没有设置禁用或无效状况
        <InputGroup>
          <InputLeftAddon children={<FaLock />} />  //暗码输入框左边的锁图标标签
          <Input type="password" placeholder="请输入暗码"/>  //设置type为password，躲藏暗码输入；placeholder供给提示文字
          <InputRightAddon children={<FaCheck />} />  //暗码输入框右侧的查看图标标签
        </InputGroup>
        // 登录按钮，点击能够提交表单
        <Button
          type="submit"   // 界说按钮为提交类型，能够触发表单提交
          boxShadow="xl"  // 设置按钮暗影为超大型尺度
          w="100%"        // 宽度设置为100%，即撑满上级容器
          colorScheme="teal"  // 运用teal颜色主题
          _hover={{ bgColor: "tomato" }}  // 鼠标悬浮时布景变为西红柿色
        >
          登录
        </Button>
      </Stack>
    </form>
  );
}

7.2 注册子组件中的内容

// 引进React库
import React from "react";
// 引进Chakra UI中用于表单的组件
import {
  Input,            // 文本框组件，答应用户输入信息
  Stack,            // 堆叠布局组件，用于按序摆放子组件
  InputGroup,       // 输入框组组件，用于将多个表单元素组合起来
  InputLeftAddon,   // 输入框左边增加组件，通常用于放置图标或文字等
  InputRightAddon,  // 输入框右侧增加组件
  FormControl,      // 表单控制组件，用于供给表单有效性和禁用状况款式
  Button,           // 按钮组件
  RadioGroup,       // 单选按钮组，办理多个Radio的选中状况
  Radio,            // 单选按钮组件
  Select,           // 下拉挑选框组件
  Switch,           // 开关挑选器组件
  FormLabel,        // 表单标签组件，用于界说表单字段的标签
  Flex,             // 弹性布局容器组件
  FormHelperText,   // 表单协助文字，供给字段阐明或协助提示
} from "@chakra-ui/core";
// 引进react-icons图标库中的部分图标
import { FaUserAlt, FaLock, FaCheck } from "react-icons/fa";
// 界说并输出SignUp注册表单组件
export default function SignUp() {
  // 组件回来的JSX内容
  return (
    <form>  // 用form包裹整个注册表单
      <Stack spacing={5}>  // 运用Stack组件笔直堆叠子组件，spacing设置堆叠的间隔
        <FormControl isDisabled isInvalid>  // 运用FormControl包装输入框，设置为禁用和无效显现
          <InputGroup>  // InputGroup组合输入框及左右增加的组件
            <InputLeftAddon children={<FaUserAlt />} />  // 左边增加用户图标
            <Input placeholder="请输入用户名" />  // 输入框组件，placeholder供给输入提示
          </InputGroup>
          <FormHelperText>用户名是必填选项</FormHelperText>  // 供给额定的协助信息或提示
        </FormControl>
        <InputGroup>  // 第二组输入框，暗码输入
          <InputLeftAddon children={<FaLock />} />  // 左边增加锁图标
          <Input type="password" placeholder="请输入暗码"/>  // 输入框设置为暗码类型，躲藏输入内容
          <InputRightAddon children={<FaCheck />} />  // 右侧增加查看图标
        </InputGroup>
        <RadioGroup defaultValue="0">  // 单选按钮组，默许选中第一个选项
          <Stack spacing={5} direction="horizontal">  // 水平摆放单选按钮
            <Radio value="0">男</Radio>  // 单选按钮，值为"0"
            <Radio value="1">女</Radio>  // 单选按钮，值为"1"
          </Stack>
        </RadioGroup>
        <Select placeholder="请挑选学科">  // 下拉挑选框组件，设置挑选提示
          <option value="React">React</option>  // 下拉选项，值为"React"
          <option value="Vue">Vue</option>      // 下拉选项，值为"Vue"
        </Select>
        <Flex>  // Flex容器用于布局开关挑选器和标签
          <Switch id="deal" mr={2} />  // 开关挑选器组件，id绑定到标签的htmlFor特点
          <FormLabel htmlFor="deal" mr="0" mb="0">  // 表单标签组件，指向id为"deal"的元素
            同意声明的协议
          </FormLabel>
        </Flex>
        <Button
          type="submit"  // 设置按钮为提交表单类型
          boxShadow="xl"  // 设置按钮暗影作用
          colorScheme="teal"  // 按钮运用teal颜色主题
          w="100%"  // 宽度设置为父容器的100%
          _hover={{ bgColor: "tomato" }}  // 鼠标悬浮时布景色变为"西红柿"色
        >
          注册
        </Button>
      </Stack>
    </form>
  );
}