Bootstrap + Reactstrap 适合快速交付但设计平庸，Chakra UI 侧重可访问性与主题化；前者全局样式易冲突，后者样式隔离但需理解 theme 结构。
Bootstrap + Reactstrap 适合快速交付但别指望设计出彩
如果你接的是内部系统、MVP 或外包边缘项目，用 Reactstrap 搭配 Bootstrap 是最省心的路径——它不挑人、文档全、组件即插即用，连 Modal、Navbar、Form 这些高频组件都封装好了，连表单验证都能靠 FormFeedback 和 FormControl 快速搭起来。
但要注意几个硬伤：
• 默认样式太“熟”，不做深度定制的话，用户一眼就能认出是 Bootstrap；
• 主题切换靠 CSS 变量或覆盖类名，!important 很容易冒出来；
• 响应式依赖 Bootstrap 的栅格类（如 col-md-6），写 JSX 时得混着写 HTML 类名，和纯 React 的语义感有割裂；
• 不支持原子化配置（比如没法全局改所有按钮的 borderRadius），得靠 CSS-in-JS 或额外主题层补救。
Chakra UI 适合重视可访问性和开发体验的中长期项目
ChakraProvider 包裹应用后，所有组件自动继承主题、焦点管理、响应式断点和 ARIA 属性——这不是“锦上添花”，而是开箱就规避了大量 WCAG 陷阱。比如 Button 自带 focusRing，Modal 默认锁定背景焦点、按 Esc 关闭、点击遮罩关闭，这些都不是靠文档提醒你加的，是框架强制你写的。
实操上要注意：
• 所有间距、字体大小、颜色都走 theme 配置，直接写 px={4} 或 color="blue.500"，别手写像素值；
• 响应式用数组语法：fontSize={['sm', 'md', 'lg']}，不是媒体查询；
• 如果你项目里已有 Tailwind 或 styled-components，Chakra 的 CSS-in-JS 抽象层会多一层心智负担；
• 它的包体积比 Reactstrap 略大（gzip 后约 85kB），但摇树（tree-shaking）效果好，实际加载压力可控。
样式侵入性：一个改全局，一个只管自己
Bootstrap 的 CSS 是全局生效的，哪怕你只用了 Button，它的 .btn、.form-control 类仍可能污染非 Reactstrap 组件的样式——尤其当你混用原生 HTML 或其他库时，经常要加 !important 或用 :not() 排除。
Chakra UI 则完全隔离：
• 所有样式通过 emotion 动态注入，类名带哈希；
• 没有全局类名冲突风险；
• 但这也意味着你不能靠浏览器 DevTools 直接改类名调试，得看 style 标签里的动态生成规则；
• 如果你习惯用 CSS 覆盖，得切到 css prop 或 sx，而不是写外部 CSS 文件。
自定义门槛：从“抄 class”到“读 theme”
想把 Bootstrap 按品牌色改一遍？找 _variables.scss 改 $primary，重编译就行。但这是个构建时操作，改完要等 CSS 输出，热更新慢，且无法运行时换肤。
Chakra UI 的主题是 JS 对象，你可以：
• 在 theme.js 里直接改 colors.blue.500；
• 用 extendTheme 合并多个主题片段；
• 甚至配合 Context 实现用户级主题切换；
• 但代价是必须理解它的 theme 结构——比如 components.Button.baseStyle 控制默认样式，variants.solid 控制变体，漏掉一层就可能白改。
真正卡住人的不是 API 多难，而是改完发现按钮圆角没变——结果发现你动的是 baseStyle，而项目里用的是 variant="outline"，得去 variants.outline 里调。
