Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React 应用所需的 UI 组件. 文档: https://next.chakra-ui.com/docs/getting-started
- Chakra UI 内置 Emotion,是 CSS-IN-JS 解决方案的集大成者
- 基于 Styled-Systems https://styled-system.com/
- 支持开箱即用的主题功能
- 默认支持白天和黑夜两种模式
- 拥有大量功能丰富且非常有用的组件
- 使响应式设计变得轻而易举
- 文档清晰而全面. 查找 API 更加容易
- 适用于构建用于展示的给用户的界面
- 框架正在变得越来越完善
//下载
npm install @chakra-ui/core@1.0.0-next.2
快速使用
克隆默认主题
Chakra-UI 提供的组件是建立在主题基础之上的, 只有先引入了主题组件才能够使用其他组件.
npm install @chakra-ui/theme
引入主题
import {ChakraProvider} from '@chakra-ui/core'
import theme from '@chakra-ui/theme'
<ChakraProvider theme={theme}>
<App/>
</ChakraProvider>
引入 CSS 重置组件
import {CSSReset} from '@chakra-ui/core'
<ChakraProvider theme={theme}>
<CSSReset />
<App/>
</ChakraProvider>
Style Props 样式属性
Style Props 是用来更改组件样式的, 通过为组件传递属性的方式实现. 通过传递简化的样式属性以达到提升开发效率的目的.
import {Box} from '@chakra-ui/core'
<Box w={200} h={200} bg='tomato' p='3px'>Hello</Box>
主题
颜色模式 (color mode)
chakra-ui 提供的组件都支持两种颜色模式, 浅色模式 (light) 和暗色模式(dark). 可以通过 useColorMode 进行颜色模式的更改.
import {userColorMode} from '@chakra-ui/core'
const [colorMode, toggleColorMode] = useColorMode()
<Text>当前颜色模式为{colorMode}</Text>
<Button onClick={toggleColorMode}>切换颜色模式</Button>
Chakra 将颜色模式存储在 localStorage 中, 并使用类名策略来确保颜色模式是持久的.
根据颜色模式设置样式
chakra 允许在为元素设置样式时根据颜色模式产生不同值. 通过 useColorModeValue 钩子函数实现.
const bgColor = useColorModeValue(lightModeValue, darkModeValue)
<Box bgColor={bgColor}></Box>
强制组件颜色模式
使组件不受颜色模式的影响, 始终保持在某个颜色模式下的样式.
import {LightMode, DarkMode} from '@chakra-ui/core'
<LightMode>
<Button onClick={toggleColorMode}>Button</Button>
</LightMode>
颜色模式通用设置
- 设置默认颜色模式 通过 theme.config.initialColorMode 可以设置应用使用的默认主题.
- 使用操作系统所使用的颜色模式 通过 theme.config.useSystemColorMode 可以设置将应用的颜色模式设置为操作系统所使用的颜色模式.
主题对象
- Colors
在设置颜色时, 可以但不限于取主题中提供的颜色值.
<Box color='gray.500'></Box>
- Space
使用 space 可以自定义项目间距. 这些间距值可以由 padding, margin 和 top, left, right, bottom 样式引用.
<Box mb='5'></Box>
//5 => 1.25rem
- Sizes
使用 size 可以自定义元素大小, 这些值可以由 width, height 和 maxWidth, minWidth 等样式引用.
<Box w='lg'></Box>
创建标准的 Chakra-UI 组件
创建 Chakra-UI 组件
const LaGouButton = chakra('button', {
baseStyle: {},
sizes: {},
variants: {}
})
LaGouButton.defaultProps = {}
<LaGouButton>button</LaGouButton>
全局化 Chakra-UI 组件样式
a. 在 src 文件夹中创建 lagou 文件夹用于放置自定义 Chakra-UI 组件 b. 在 lagou 文件夹中创建 button.js 文件并将组件样式放置于当前文件中并进行默认导出
const MyButton = {
baseStyle: {},
sizes: {},
variants: {},
defaultProps: {}
}
export default MyButton
c. 在 lagou 文件夹中创建 index.js 文件用于导入导出所有的自定义组件
import MyButton from './button'
export default {
MyButton
}
d. 在 src 文件夹中的 index.js 文件中导入自定义 Chakra-UI 组件并和 components 属性进行合并
import MyComponents from './components'
const myTheme = {
...theme,
components: {
...theme.components,
...MyComponents
}
e. 在组件中使用样式化组件
const MyButton = chakra('button', {
themeKey: 'MyButton'
})
- 原文作者:知识铺
- 原文链接:https://geek.zshipu.com/post/tlg/output/4-3-5-Chakra-UI/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com