Grommet 的 Box 嵌套时不占满父容器，因默认 display: flex 且 column 方向但不拉伸子元素；需每层显式设 height: "100%" 或 flex: 1，并注意 gap 替代 margin、Grid rows/columns 设为 ["flex"]。
为什么 Grommet 的 Box 在嵌套时突然不占满父容器？
因为默认 Box 是 display: flex 且 flex-direction: column，但不会自动拉伸子元素——它只管自己布局，不管子元素是否“填满”。企业级表单或仪表盘里常出现顶部区域留白、卡片高度塌陷，基本都卡在这。
-
Box默认不继承父级高度，需显式加height: "100%"或flex: 1 - 嵌套多层
Box时，每一层都得确认是否设置了flex或height，漏一层就断链 - 用
gap替代margin更安全，否则margin可能触发 flex 容器的最小尺寸限制，导致意外换行 - 在
Grid内部嵌Box，要留意Grid的rows/columns是否设为["flex"]，否则Box的flex: 1无效
DataTable 排序后数据没重渲染？
常见于从 Redux 或 Zustand 拿数据时直接传 data 数组给 DataTable，但 Grommet 的 DataTable 不监听数组引用变化——它只在组件 mount 或 data 引用变更时触发排序逻辑，不 deep watch。
- 确保每次排序后传入的是新数组引用：
[...sortedData]或structuredClone(sortedData) - 别在
onSort里只改本地 state，忘了触发DataTable的重新渲染（React 18 下尤其明显） - 如果用了
useMemo缓存data，检查依赖项是否遗漏了排序字段或方向，否则缓存不更新 -
DataTable的sort属性是受控的，必须配合onSort同步更新本地状态，不能只靠点击触发
如何让 ThemeContext 正确穿透到所有自定义 hooks 中？
企业项目常把主题逻辑抽成 hook（比如 useBrandColors()），但 Grommet 的 ThemeContext 默认只提供给组件树，hook 里用 useContext(ThemeContext) 会返回 undefined —— 因为没被 Grommet 组件包裹，或上下文 provider 位置太浅。
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
-
ThemeContext必须由最外层的<grommet full theme="{...}"></grommet>提供，不能只包App，得包住整个 React root（比如index.tsx里） - 自定义 hook 内部调用
useContext(ThemeContext)前，先确认该 hook 被 Grommet 组件树内的组件调用（否则 context 为空） - 避免在非组件作用域（如工具函数、service 层）里尝试读取
ThemeContext，它不是全局变量 - 调试时可临时加
console.log(useContext(ThemeContext))看是否为undefined，再反查 provider 包裹范围
ResponsiveContext 的值在 SSR 和 hydration 后不一致？
服务端渲染时，ResponsiveContext 只能返回默认断点（通常是 "medium"），而客户端 hydration 后才根据真实 viewport 计算。这会导致首屏闪动、按钮错位、菜单意外展开，尤其在 Next.js 或 Remix 中高频出现。
立即学习“前端免费学习笔记（深入）”；
- 别在 SSR 阶段依赖
size值做关键布局决策（比如条件渲染大屏专属模块） - 用
useEffect+useState延迟读取真实 size，并加 loading 占位，避免 layout shift - 若需服务端适配，得结合
getServerSideProps解析 user-agent，手动注入初始 size 到 props，再同步到 context - Grommet v2.30+ 支持
initialSizeprop，可在Grommet标签上显式传入预判值，减少不一致窗口期
企业级应用里，响应式不是“写了就生效”，而是得在 SSR、hydration、resize、theme 切换多个生命周期里反复对齐 context 状态——最容易被忽略的是：你以为的“响应式”其实只是客户端的一次性快照。
