三、样式系统
3.1 Style Props（样式属性）
Chakra UI最核心的特性是Style Props——通过React组件属性直接传递样式值，无需编写CSS或使用className。
import { Box, Button, Text } from '@chakra-ui/react'
function Example() {
return (
// 使用样式属性直接控制外观
<Box bg="blue.500" p={4} rounded="md" shadow="lg">
<Text fontSize="xl" fontWeight="bold" color="white">
欢迎使用Chakra UI！
</Text>
<Button colorScheme="teal" mt={4}>
开始使用
</Button>
</Box>
)
}
常用Style Props分类：
3.2 主题系统
Chakra UI使用主题系统统一管理设计令牌（Design Tokens）。默认主题包含颜色、间距、断点、字体等配置。
import { extendTheme, ChakraProvider } from '@chakra-ui/react'
// 自定义主题
const theme = extendTheme({
colors: {
brand: {
50: '#e6f7ff',
100: '#bae7ff',
500: '#1890ff',
900: '#003a8c',
},
},
fonts: {
heading: `'Inter', sans-serif`,
body: `'Inter', sans-serif`,
},
config: {
initialColorMode: 'light', // 初始颜色模式
useSystemColorMode: true, // 跟随系统主题
},
})
function App() {
return (
<ChakraProvider theme={theme}>
<YourApp />
</ChakraProvider>
)
}
主题对象结构：
3.3 颜色模式（深色模式）
Chakra UI内置了深色模式支持，所有组件都提供深色变体。
import { useColorMode, Button, IconButton } from '@chakra-ui/react'
import { SunIcon, MoonIcon } from '@chakra-ui/icons'
function ColorModeToggle() {
const { colorMode, toggleColorMode } = useColorMode()
return (
<IconButton
aria-label="切换主题"
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
/>
)
}
深色模式配置选项：
四、响应式设计
4.1 响应式语法概述
Chakra UI采用移动优先（mobile-first）的响应式设计，使用min-width媒体查询。它提供了两种响应式语法：数组语法和对象语法。
4.2 默认断点
Chakra UI预定义了6个响应式断点：
4.3 数组语法
数组语法是最推荐的响应式写法，按照[base, sm, md, lg, xl, 2xl]的顺序传递值：
import { Box, Text } from '@chakra-ui/react'
// 宽度响应式：移动端100%，平板50%，桌面25%
<Box w={['100%', '50%', '25%']} bg="blue.500" p={4}>
响应式宽度
</Box>
// 字体响应式：移动端小号，平板中号，桌面大号
<Text fontSize={['sm', 'md', 'lg', 'xl']}>
响应式字体大小
</Text>
// 跳过某些断点（使用undefined占位）
<Box w={['100%', undefined, undefined, '50%']}>
仅在移动端和桌面端有样式
</Box>
数组语法的解释：
索引0（base）：从0px起生效
索引1（sm）：从480px起生效
索引2（md）：从768px起生效
索引3（lg）：从992px起生效
索引4（xl）：从1280px起生效
索引5（2xl）：从1536px起生效
4.4 对象语法
对象语法使用断点名称作为键名，适用于需要更明确语义的场景：
import { Box, Text } from '@chakra-ui/react'
// 对象语法示例
<Box
bg={
{ base: 'blue.500', md: 'green.500', lg: 'red.500' }}
p={
{ base: 2, md: 4, lg: 6 }}
>
不同断点不同背景色和内边距
</Box>
<Text fontWeight={
{ base: 'medium', lg: 'bold' }}>
在桌面端加粗显示
</Text>
4.5 高级断点定位
Chakra UI v3提供了更精细的断点控制工具：
- 范围定位（To语法）
// 在md和xl断点之间应用样式 <Text fontWeight={ { mdToXl: 'bold' }}> 在中等屏幕到超大屏之间加粗 </Text> - 单断点定位（Only语法）
// 仅在lg断点应用样式 <Text fontWeight={ { lgOnly: 'bold' }}> 仅在大屏幕上加粗 </Text> - 向下定位（Down语法）
4.6 显示/隐藏工具// 在sm断点及以下应用样式 <Text fontWeight={ { smDown: 'bold' }}> 在小屏幕及以下加粗 </Text>
Chakra UI提供了hideFrom和hideBelow工具，用于在特定断点显示或隐藏元素：
```
import { Stack, Text } from '@chakra-ui/react'
// 在md断点及以上隐藏
在平板及以上隐藏
// 在md断点以下隐藏
在手机和平板上隐藏
**4.7 自定义断点**
可以通过扩展主题来自定义断点：
import { extendTheme } from '@chakra-ui/react'
const breakpoints = {
sm: '320px',
md: '768px',
lg: '960px',
xl: '1200px',
'2xl': '1536px',
}
const theme = extendTheme({ breakpoints })
⚠️ 注意：自定义断点时，建议使用统一的CSS单位（全部用px或全部用em，不要混用）。
**4.8 响应式变体最佳实践**
在使用组件变体（variant）时，建议使用明确的断点边界而非base断点，避免样式泄漏：
// ⚠️ 可能造成样式泄漏
< Button variant={
{ base: 'solid', md: 'outline' }}>
// ✅ 推荐做法
< Button variant={
{ smDown: 'solid', md: 'outline' }}>
```
来源：
https://tmywi.cn/
