Chakra UI 的 Box 和 Flex layout 不生效因样式系统不自动推导 display；需显式设 display="grid" 或 display={{base:"block",md:"grid"}}；Flex 默认 display="flex" 但依赖 flexDirection、gap 等 prop 控制行为；混用原生标签会绕过约束逻辑；独立 toast 需传 theme 和 defaultOptions；useBreakpointValue SSR 下必须设 fallback；自定义组件须用 chakra() 包裹并透传 systemProps。
Chakra UI 的 Box 和 Flex 为什么 layout 不生效？
因为 Chakra 的样式系统默认把 CSS 属性映射成响应式 prop，但不是所有 CSS 值都直接透传——比如 display: "grid" 必须显式写成 display="grid"，而不能靠 gridTemplateColumns 自动推导。常见现象是写了 gridTemplateColumns="1fr 2fr" 却还是 inline 元素布局。
- 必须手动设
display="grid"（或display={{ base: "block", md: "grid" }}）才能触发 grid 布局 -
Flex组件默认display="flex"，但flexDirection、gap等 prop 才真正控制行为，光靠 class 或自定义 CSS 会被重置 - 如果你在
Box里混用原生 HTML 标签（如<div>），Chakra 的约束逻辑不会穿透进去，子元素的 <code>margin可能被 reset 或忽略用
createStandaloneToast自定义 toast 时样式丢失怎么办？Chakra 的 toast 默认依赖
ToastProvider注入的 theme 和 context，独立实例不自动继承全局配置，所以字体、颜色、z-index 都可能回退到默认值。- 调用
createStandaloneToast后，必须显式传入theme和defaultOptions，例如：const toast = createStandaloneToast({ theme, defaultOptions: { position: "top-right", duration: 3000 } }) - 如果项目用了
extendTheme，记得把扩展后的 theme 对象传进去，而不是原始theme导出值 - 独立 toast 不受
ToastProvider的containerStyle影响，要改容器样式得靠toast({ containerStyle: { ... } })
为什么
useBreakpointValue在 SSR 下返回 undefined？这个 hook 依赖
window.matchMedia，服务端没有 DOM，所以初始渲染时拿不到断点值，导致 hydration 时 layout 跳变或报错。- 永远用 fallback 值：例如
useBreakpointValue({ base: "sm", md: "lg" }, { fallback: "sm" })，fallback是 SSR 必填项 - 不要在组件顶层直接解构使用，比如
const size = useBreakpointValue(...)，应包裹在useEffect或条件渲染中避免服务端执行 - 如果用于样式计算（如动态
fontSize），优先考虑用 Chakra 内置响应式数组语法：fontSize={{ base: "md", lg: "xl" }}，它由 styled-system 处理，天然 SSR 安全
自定义组件接入 Chakra 约束系统（props 映射）的关键三步
想让自己的组件支持
color、bg、px这类 props，不是加个...rest就完事——Chakra 的约束逻辑只对通过systemProps注册的组件生效。立即学习“前端免费学习笔记（深入）”；
- 用
chakra("div")或chakra.custom("my-component")包裹你的组件，而不是直接用forwardRef+Box - 在组件内部用
useMultiStyleConfig和useStyleConfig拿 theme token，别硬写color={props.color || "gray.500"} - 确保组件接受并透传
systemProps（如width、textAlign），这些字段必须出现在propNames列表里，否则 styled-system 不识别
约束系统真正的复杂点不在写法，而在 theme token 的层级嵌套和 responsive 数组的解析顺序——稍不注意，
fontSizes.sm和fontSizes["sm"]就会表现不同，而且这种差异在 SSR 和 CSR 之间还可能不一致。 - 调用
