本文详解如何在 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"> 隐藏，通过相邻兄弟选择器（+）将状态映射到紧随其后的 <label> 元素上。因此，不能直接写 .btn:active，而应利用 :checked 状态定位真实激活的 label。
✅ 正确做法是使用以下 CSS 规则（推荐注入到组件样式文件或 <style> 标签中）：
/* 为已选中的 radio 对应的 label 添加边框和阴影 */
input[type="radio"]:checked + label.btn {
border: 2px solid #0d6efd; /* 蓝色强调边框 */
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); /* Bootstrap 风格聚焦阴影 */
}? 提示：box-shadow 值中 0 0 0 3px 表示无偏移、无模糊、纯扩展的外发光效果，与 Bootstrap 官方 .focus-ring 逻辑一致，视觉更专业。
你可将该 CSS 直接写入组件的 <style> 标签内（适用于局部作用域），或添加到全局 CSS 文件中。若需仅对特定按钮组生效（如本例的 chooseBuffer 组），可增强选择器特异性：
/* 仅作用于 name="chooseBuffer" 的按钮组 */
input[name="chooseBuffer"]:checked + label.btn {
border: 2px solid #28a745;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}⚠️ 注意事项：
- 不要用 style={{}} 内联写 :checked 伪类：React 的 style 属性不支持伪类，必须使用外部 CSS 或 <style> 标签；
- 确保 HTML 结构严格为 input + label 相邻：中间不能插入空格、注释或其它元素，否则 + 选择器失效；
- 避免覆盖 .btn:focus：若同时需要键盘焦点反馈，建议额外补充 input:focus + label.btn 规则；
- 响应式兼容性：上述样式在所有断点下均有效，无需额外媒体查询。
最后，将你的 JSX 保持原结构即可（无需修改 class 或添加 style 属性），CSS 自动接管激活态渲染：
<div className="row">
<h4>Choose buffer</h4>
</div>
<div className="row">
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer1" autoComplete="off"
onChange={() => measurementConfig.buffer = 1} />
<label className="btn btn-lg btn-warning" htmlFor="buffer1">
<span className="bi-database-add"></span> Buffer 1
</label>
</div>
{/* 其余两个同理 */}
</div>✅ 总结：通过 input:checked + label.btn 这一精准选择器，你能在 Bootstrap 5.3 中优雅、低侵入地恢复“激活态视觉强化”，既符合设计规范，又保持代码可维护性。这是 React + Bootstrap 组合下处理表单控件状态样式的最佳实践之一。
