React+Bootstrap5.3：为激活状态的单个按钮添加阴影/边框

Bootstrap 5.3确实默认移除了.btn-check:checked+.btn的阴影效果，要还原v5.0的激活样式，你可以通过以下两种方式实现：

方法一：自定义CSS类（推荐） #

创建一个自定义类，利用Bootstrap内置的颜色变量实现适配不同主题色的阴影，只需一次定义即可复用：

/* 在项目CSS文件中添加 */
.btn-active-shadow.btn-check:checked+.btn {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-active-rgb), 0.5);
}

修改你的React代码，给每个按钮的label标签添加这个自定义类：

<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" onClick={() => measurementConfig.buffer = 1} />
    <label className="btn btn-lg btn-warning btn-active-shadow" htmlFor="buffer1"><span className="bi-database-add"></span>&nbsp;Buffer 1</label>
  </div>
  <div className="col-sm-4 p-3 d-flex justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer2" autoComplete="off" onClick={() => measurementConfig.buffer = 2} />
    <label className="btn btn-lg btn-success btn-active-shadow" htmlFor="buffer2"><span className="bi-database-add"></span>&nbsp;Buffer 2</label>
  </div>
  <div className="col-sm-4 p-3 d-flex justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer3" autoComplete="off" onClick={() => measurementConfig.buffer = 3} />
    <label className="btn btn-lg btn-info btn-active-shadow" htmlFor="buffer3"><span className="bi-database-add"></span>&nbsp;Buffer 3</label>
  </div>
</div>

方法二：结合React状态的内联样式 #

如果你想直接通过内联style属性控制，可以利用已有的measurementConfig.buffer状态，给当前选中的按钮添加阴影：

<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" onClick={() => measurementConfig.buffer = 1} />
    <label 
      className="btn btn-lg btn-warning" 
      htmlFor="buffer1"
      style={measurementConfig.buffer === 1 ? { boxShadow: '0 0 0 0.25rem rgba(255, 193, 7, 0.5)' } : {}}
    >
      <span className="bi-database-add"></span>&nbsp;Buffer 1
    </label>
  </div>
  <div className="col-sm-4 p-3 d-flex justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer2" autoComplete="off" onClick={() => measurementConfig.buffer = 2} />
    <label 
      className="btn btn-lg btn-success" 
      htmlFor="buffer2"
      style={measurementConfig.buffer === 2 ? { boxShadow: '0 0 0 0.25rem rgba(40, 167, 69, 0.5)' } : {}}
    >
      <span className="bi-database-add"></span>&nbsp;Buffer 2
    </label>
  </div>
  <div className="col-sm-4 p-3 d-flex justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer3" autoComplete="off" onClick={() => measurementConfig.buffer = 3} />
    <label 
      className="btn btn-lg btn-info" 
      htmlFor="buffer3"
      style={measurementConfig.buffer === 3 ? { boxShadow: '0 0 0 0.25rem rgba(23, 162, 184, 0.5)' } : {}}
    >
      <span className="bi-database-add"></span>&nbsp;Buffer 3
    </label>
  </div>
</div>

内容的提问来源于stack exchange，提问作者nico