我喜欢使用 Chakra UI for React 的原因
Chakra UI 是一个简单、模块化且易于使用的组件库，它为您提供了构建 React 应用程序所需的所有构建模块。
Chakra 绝对是我在 React 项目开发过程中体验过的最有趣的工具。用它构建 UI 既快速又简单。以下是我认为你应该在下一个项目中考虑使用 Chakra UI 的原因。
1. 易于定制主题
自定义 Chakra 并使其外观与设计师提供的模板完全一致非常简单。只需创建一个theme.js文件并传递一个 JSON 对象即可。
// example theme.js
import { theme } from "@chakra-ui/core";
// Let's say you want to add custom colors
const customTheme = {
...theme,
colors: {
...theme.colors,
brand: {
900: "#1a365d",
800: "#153e75",
700: "#2a69ac",
},
},
};
您还可以自定义字体和字号。
// example theme.js
export default {
fonts: {
heading: '"Avenir Next", sans-serif',
body: "system-ui, sans-serif",
mono: "Menlo, monospace",
},
fontSizes: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "4rem",
},
};
您还可以自定义断点。
// example theme.js
export default {
breakpoints: ["30em", "48em", "62em", "80em"],
};
请查看文档了解更多自定义选项
2. 内置深色模式
Chakra 的大多数组件都兼容深色模式。您可以使用
useColorMode应用程序中的钩子来更改颜色模式。此值将被存储localStorage，并在每次页面加载时使用。
你只需要用一个提供程序包裹你的根组件即可。
import React from "react";
import { ThemeProvider, ColorModeProvider } from "@chakra-ui/core";
import customTheme from "./theme";
function TurnOnColorMode({ children }) {
return (
<ThemeProvider theme={customTheme}>
<ColorModeProvider>{children}</ColorModeProvider>
</ThemeProvider>
);
}
3. 响应式（移动优先）设计，无需繁琐的媒体查询，易于样式设置
Chakra UI 开箱即用，支持响应式样式。无需手动添加
@media查询语句和嵌套样式，Chakra UI 允许您通过提供数组值来添加移动优先的响应式样式。
Chakra 以移动端优先，因此在移动设备上也能保持良好的性能。
<>
<Box
height="40px"
bg="teal.400"
width={[
"100%", // base
"50%", // 480px upwards
"25%", // 768px upwards
"15%", // 992px upwards
]}
/>
{/* responsive font size */}
<Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
{/* responsive margin */}
<Box mt={[2, 4, 6, 8]} width="full" height="24px" bg="tomato" />
{/* responsive padding */}
<Box bg="papayawhip" p={[2, 4, 6, 8]}>
Padding
</Box>
</>
这种响应式设计适用于主题规范中的每个样式属性。您可以在指定的断点处更改属性的样式。
Chakra UI 包含一系列布局组件，例如 `<div>`Box和 ` Stack<span>`，您可以通过传递 props 轻松地为组件设置样式。了解更多
4. 组件种类繁多，价格却很低
Chakra 包含 49 个组件和 3 个实用钩子。经过 mified 和 gzip 压缩后，总大小仅为 101.2kB。查看BundlePhobia上的完整报告。
5. 无障碍
Chakra UI 组件遵循 WAI-ARIA 指南规范，并具有正确的aria-*属性。
正在查找文档？
点击这里 => https://chakra-ui.com
文章来源：https://dev.to/burhanuday/reasons-why-i-love-using-chakra-ui-for-react-1e3i