Bootstrap5.3按钮样式自定义方法

本文深入讲解了在 React 与 Bootstrap 5.3 结合的项目中，如何通过精准的 CSS 选择器（`input[type="radio"]:checked + label.btn`）为 `btn-check` 单选按钮组的已选中项添加自定义边框和阴影效果，既规避了全局样式污染，又无需修改 Bootstrap 源码或牺牲可维护性；特别适合需要强化交互反馈的表单场景（如缓冲区选择器），还提供了按 name 属性局部定制、响应式兼容及常见避坑指南，是兼顾视觉规范与工程实践的高效解决方案。

本文详解如何在 React + Bootstrap 5.3 项目中，为基于 btn-check 的单选按钮组中的已选中项（active state）精准添加 CSS 边框或阴影效果，无需全局修改 Bootstrap 样式，支持按需、独立定制。

本文详解如何在 React + Bootstrap 5.3 项目中，为基于 `btn-check` 的单选按钮组中的**已选中项**（active state）精准添加 CSS 边框或阴影效果，无需全局修改 Bootstrap 样式，支持按需、独立定制。

Bootstrap 5.3 默认移除了 .btn:active 和 .btn:focus 的默认阴影（box-shadow），并采用更简洁的视觉反馈（如轻微背景色加深）。但当你需要还原类似 Bootstrap 5.0 中“选中按钮带明显外边框/阴影”的交互提示时——尤其在表单控制类场景（如本例的缓冲区选择器）——必须通过 CSS 显式覆盖。

关键在于理解 Bootstrap 的 btn-check 机制：它将 <input type="radio"> 隐藏，通过相邻兄弟选择器（+）将状态映射到紧随其后的 元素上。因此，不能直接写 .btn:active，而应利用 :checked 状态定位真实激活的 label。

✅ 正确做法是使用以下 CSS 规则（推荐注入到组件样式文件或