- 综合排序
- 最热优先
- 最新优先
Chakra UI React组件库入门指南
什么是Chakra UI？Chakra UI是一个简单、模块化且可访问的React组件库，它提供了构建React应用所需的所有构建块。 Chakra UI的基础概念在深入了解组件之前，我们需要先理解Chakra UI的几个核心概念。 Chakra UI提供了shouldForwardProp选项来减少不必要的渲染：```jsximport { chakra } from '@chakra-ui/react';// 创建一个只转发特定 Chakra UI与其他UI库的比较我用过很多React UI库，那么Chakra UI与其他库相比如何呢？ 如果你打算尝试Chakra UI，这里是我的一些建议：从官方文档开始：Chakra UI的文档非常详尽，包含了大量示例和最佳实践。
46521编辑于 2025-09-25- 来自专栏学习
【优选算法】Sliding-Chakra：滑动窗口的算法流（上）
把一个较长的序列（比如数组、字符串等），划分成一个个固定长度或者动态长度的 “子序列”，这个子序列就被称作窗口 。好比通过一个固定大小的窗框在一幅长画卷上逐步移动，每次窗框圈定的部分就是一个窗口内容，窗口会按照特定的规则在序列上 “滑动”，常见的是每次移动一个元素的位置，新元素进入窗口，同时最靠前的旧元素移出窗口，借此不断更新窗口内的数据集合
42110编辑于 2024-12-28 - 来自专栏学习
【优选算法】Sliding-Chakra：滑动窗口的算法流（下）
首先解读题意，简单来说就是找到一个区间，其中的果树种类用数字表示，种类不超过两种，题目默认是能找到至少两种水果，所以求在此前提下能找到的最长区间是多少？
22210编辑于 2024-12-31 - 来自专栏前端从进阶到入院
32K star 的 Chakra UI，以及未来的展望
Hi，我是 ssh，最近一段时间，经常听说 Chakra UI 这个库，虽然没有在公司的项目里用过，但是从我短暂的了解来说，感觉是个兼顾优雅和实用的 UI 组件库，最近 Chakra UI 的作者 Segun Adebayo 发表了一篇文章，讲述了他对这个库未来的一些展望，给了我很多启发，接下来我给大家分享一下他的这篇The future of Chakra UI 正文 在过去的五年里，我一直在致力于 Chakra 发展和管理 Chakra 核心团队是一段非常好的经历，再来一次的话，我还是会这样做。 说到这，让我们来看看 Chakra UI 的下一步计划。迫不及待和你分享了。 以下是我们对 Chakra UI 未来的一些要求： 跨框架支持：Chakra UI 是一个跨框架库。它可以在 React、Vue、Angular、Svelte 和 Solid 中使用。 我们希望在 2023 年能够提供更多的 Chakra UI 解决方案和工具，以满足开发人员和设计师的不同需求。 这就是我们对 Chakra UI 的未来展望。
1.2K30编辑于 2023-10-14 - 来自专栏全栈程序员必看
v8,spidermonkey,chakra,spidermonkey四大主流JS引擎安装教程
/download-engine.sh：用于下载引擎源码，ch对应chakra引擎，1.11.5对应引擎版本。 /build-ch.sh：用于编译安装chakra引擎，其他格式为./build-***.sh的脚本功能类似。 . /build-ch-cov.sh：用于编译安装插桩的chakra引擎，可在执行JS文件时测试引擎的源码覆盖率，需要提前安装AFL工具。其他格式为./build-***-cov.sh的脚本功能类似。
76120编辑于 2022-11-03 - 来自专栏前端实验室
34K Star 的UI库，超神了！
大家好，我是「前端实验室」爱分享的了不起~ 虽然了不起没有在公司项目中用到这个三方库，但也看到不少项目在使用，简单看了下Chakra UI 确实也是个实用且美观的一个 UI 组件库。 Chakra UI Chakra-UI 是一个简单的、模块化的易于理解的UI组件库。提供了丰富的构建React应用所需的UI组件。 你可以使用 Chakra UI 轻松创建自己的设计系统，也可以只安装其中的一些组件。由于使用了样式道具，自定义组件和主题非常容易，如此我们有更多的时间用于构建出色的用户体验。 some ⚡️Chakra! 项目地址：https://github.com/chakra-ui/chakra-ui
88430编辑于 2023-09-20 - 来自专栏技术杂记
[ Windows 10 x64中的RFG(Return Flow Guard)技术研究 ]8
00007ffb`c52b0580 4d33db xor r11,r1100007ffb`c52b0583 ff25e7f33800 jmp qword ptr [chakra _guard_ss_verify_failure_fptr00007ffa`0495f970 chakra! _guard_ss_verify_failure_fptr = <no type information> //替换0:011> dqs chakra! jscriptinfo_IID_Lookup+0x2a6000007ffa`0495f990 00007ffa`04323a70 chakra! jscriptinfo_IID_Lookup+0x2a70 chakra!
71841编辑于 2022-06-29 - 来自专栏程序那些事儿
如何在 React 中快速实现暗黑模式
因此在项目中实现暗模式是一项非常有用的技能，使用 ReactJS 和 Chakra UI 可以轻松实现暗模式。 接下来让我们看看如何使用 Chakra UI 来构建一个可以在深色和浅色之间的网站。 第一步 要开始使用 Chakra UI，需要通过在终端中运行以下命令将其安装在项目中： npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion 这样就安装好了 Chakra UI，然后就可以开始实现暗模式了。 在主题文件中引入 chakra-ui import {extendTheme} from '@chakra-ui/react' 接下来，打开index.css文件。 总结 通过引入 Chakra UI 框架，我们会发现实现网站的暗黑模式变得非常的简单，我们只需要进行相应的配置即可。
2.9K30编辑于 2023-07-24 - 来自专栏开源服务指南
高效 UI 组件，节省开发时间 | 开源专题 No.70
chakra-ui/chakra-uihttps://github.com/chakra-ui/chakra-ui Stars: 35.6k License: MIT chakra-ui 是一个为 React 通过传递 props 轻松设置样式 组件基于 React UI Primitive 构建，具有无限可组合性 遵循 WAI-ARIA 指南规范，并具有正确的 aria-* 属性以达到无障碍标准 大部分 Chakra UI 组件都支持暗黑模式 简洁易懂且灵活可变动性强大：Chakra UI 的设计理念是简洁明了并且高度模块化 其主要特点包括： 易于样式设计：Chakra UI 包含一系列布局元素（例如 Box 和
71710编辑于 2024-04-30 - 来自专栏网络日志
使用Next.js创建Blog
pnpm-lock.yaml ├── public ├── styles └── tsconfig.json 安装依赖 pnpm install globby gray-matter dayjs @chakra-ui } from 'react' import { List, LinkOverlay, ListItem, Container, Heading, Image } from '@chakra-ui 的配置 // pages/_app.js import {ChakraProvider} from '@chakra-ui/react' function MyApp({Component, pageProps ，所以将组件都转成了 chakra-ui 提供的组件，配置如下： import CanIUse from 'components/CanIUse' import {Heading, Link, Box} from '@chakra-ui/react' import {FiExternalLink} from 'react-icons/fi' const components = { CanIUse
97610编辑于 2024-06-12 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x2：构建和文档化组件
# Chakra UI 当我们为应用程序构建 UI 时，必须决定使用什么来为组件设置样式。此外，我们还必须考虑是从零实现所有组件还是使用带有预制组件的组件库。 在这个实战系列中，我们将使用 Chakra UI，这是一个基于 emotion 和 styled-system 的组件库。 # 安装及配置 安装： pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion 为了使用 Chakra UI，首先我们需要配置它的主题 ChakraProvider theme={theme}> <GlobalStyle /> {children} </ChakraProvider> ); }; Chakra src/config/theme.ts 是我们的主题配置文件: import { extendTheme } from "@chakra-ui/react"; const colors = { primary
1.3K10编辑于 2023-05-17 - 来自专栏new
控制样式的组件都在
style.module.scss：布局样式 全局样式： /src/web/styles/default.scss：默认样式 /src/web/styles/reset.scss：样式重置 主题配置： 项目使用 Chakra UI 的组件和主题系统，主要通过以下方式定制： @chakra-ui/react 的组件 ChakraProvider 的主题配置 如果要换一套完全不同的模板，你需要： 修改 Layout 组件： 只改变内部实现 修改样式： 更新 /src/web/styles/ 下的样式文件 或创建新的样式文件 更换主题： 可以使用不同的 UI 库（比如 Material-UI、Ant Design） 或者自定义 Chakra 字体、间距等主题变量 如果要换一个完全不同但功能类似的样式，你应该： 主要修改 /src/pages/app/list/components/ 下的组件： 可以重写组件的 JSX 结构 修改或替换 Chakra
76310编辑于 2024-12-17 - 来自专栏前端博客
JS引擎(0):JavaScript引擎群雄演义—起底JavaScript引擎
即便Chakra的解释器也是字节码解释器，它的字节码设计与老版本JScript的已经相当不同，解释器自身的速度都已经有所提升。Chakra里的隐藏类变迁机制叫做“type evolution”。 每个产品都必须发明些新名词E9版Chakra里字段数量不超过16个的对象可以使用紧凑布局；IE10版Chakra将这限制放宽到30多个字段。 Chakra里的value representation跟V8的比较类似，都是在最低的几位放tag；不过Chakra的是tagged-value，也就是在小整数的后面带上一个0x1的tag，而对象地址是 ，下一个大版本就是IE9里的JScript 9.0，代号Chakra，在前面有介绍。 在Chakra里也继承了下来。
3K30编辑于 2023-04-09 - 来自专栏深入浅出区块链技术
使用 React 和 ethers.js 构建DApp
我们也像他的项目一样使用 Chakra UI。你可能也会发现网页与 POC 几乎一样。 任务 1.4: 用 Next.js 和 Chakra UI 创建 webapp 我们将使用Node.js、React、Next.js和Chakra UI框架创建一个 webapp。 第 3 步：安装 Chakra UI 通过运行 Chakra UI（文档[8]）来安装： yarn add @chakra-ui/react @emotion/react @emotion/styled UI Provider 编辑_app.tsx // src/pages/_app.tsx import { ChakraProvider } from '@chakra-ui/react' import /layout" import { Text, Button } from '@chakra-ui/react' const Home: NextPage = () => { return (
6.4K31编辑于 2022-11-07 - 来自专栏前端实验室
又一款令人惊艳的Github Ai开源项目！
大家好，我是「前端实验室」爱分享的了不起~ 上一篇我们提到 Chakra UI 这个组件库，前俩天看到 Github 上一个比较热门、好用的AI工具，其前端UI就是使用 Chakra UI 来开发UI组件的
74620编辑于 2023-09-20 - 来自专栏深度学习与python
怎样挑选一个好的NPM包？
即使在这些比较顶级的开源软件中，其风险状况的差异也是比较明显的： Chakra UI Evergreen] Antd Base Web 寿 命 开发者喜欢点赞数。 单从点赞数来看，人们可能认为 Chakra UI 和 Evergreen 在采用率上大致相同，但是 Chakra UI 明显超过了它的竞争者。 所有这些库最初都收获了一轮点赞爆发，但只有 Chakra 在过去的一年里维持了它的增长率。 像 Antd 和 Chakra UI 这样比较去中心化的包，对政策上的冷漠更有抵抗力。 性 能 做同样事情的两个软件在大小上可能差异很大。 虽然我们检查过的这些组件都是安全的，但是 Chakra UI 和 Antd 的庞大的依赖使得它们比较脆弱。在下载一个依赖后，你应该使用 yarn audit 或 npm audit 来执行一次审计。
1.2K10发布于 2021-01-06 - 来自专栏JVMGC
22.1K Star程序模板!快速开发Web项目
Chakra UI：使用 Chakra UI 设计前端组件，Chakra UI 是一组高度可定制的 React 组件。 安全和身份验证 安全密码哈希：默认提供安全密码哈希机制，增强用户凭据的安全性。
1.1K10编辑于 2024-04-12 - 来自专栏漏洞战争
今年的OffensiveCon大会议题质量不错（附资料下载）
Attacking Edge Through the JavaScript Just-In-Time compiler 一直以来，chakra被曝的漏洞非常多，导致微软最终还是放弃了。 从今年开始，微软将打算把Edge的Chakra引擎改用Google Chromium引擎，估计最近这两个月就会发布，以后就可能没什么人再搞Chakra内核了。 这议题里面讲了很多chakra的js对象内存结构等基础知识，重点讲了JIT优化编译器的漏洞原理与利用技巧，整个ppt有120页，很多。 我没搞过chakra，未来可能也用不上了，有兴趣的同学可以看下，作者把exploit代码也公布了，我已附在本文的打包资料里面。
1.3K20发布于 2019-07-18 - 来自专栏无限可能的程序开发
D8调试工具——jsvu的使用细则
engines=v8-debug 操作系统支持的引擎 JavaScript engine Binary name mac64 mac64arm win32 win64 linux32 linux64 Chakra chakra or ch ✅ ❌ ✅ ✅ ❌ ✅ GraalJS graaljs ✅ ❌ ❌ ✅ ❌ ✅ Hermes hermes & hermes-repl ✅ ❌ ❌ ✅ ❌ ✅ JavaScriptCore Updater [<engine>@<version>] [--os={mac64,mac64arm,linux32,linux64,win32,win64,default}] [--engines={chakra add <host name> <host type> <host path> --args <optional arguments> 根据需要使用的引擎，自行配置，如下 eshost --add "Chakra " ch "%USERPROFILE%.jsvu\chakra.cmd" eshost --add "GraalJS" graaljs "%USERPROFILE%.jsvu\graaljs.cmd"
1.1K20编辑于 2022-09-26 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x5：集成 API 到应用中
/providers/app.tsx import { ReactNode } from "react"; import { ChakraProvider, GlobalStyle } from "@chakra-ui GetServerSidePropsContext, InferGetServerSidePropsType } from "next"; import { Heading, Stack } from "@chakra-ui GetServerSidePropsContext, InferGetServerSidePropsType } from "next"; import { Stack, Button } from "@chakra-ui /react"; import { PlusSquareIcon } from "@chakra-ui/icons"; import { Link } from "@/components/link" 职位创建 // src/features/jobs/components/create-job-form/create-job-form.tsx import { Box, Stack } from "@chakra-ui
2K20编辑于 2023-05-17
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号