Bootstrap 5条纹表格行应用text-success类无效果如何解决

Bootstrap 5 修改了条纹表格的样式实现逻辑：.table-striped 的条纹规则直接作用于 <tr> 内部的 <td> 元素设置样式，给 <tr> 挂载的 .text-success 类的文字颜色只能通过继承传递给td，而CSS规则里，直接作用在元素上的样式优先级永远高于继承样式，因此条纹行的文字颜色会被默认条纹样式覆盖，只有未命中条纹规则的行才能正常显示绿色文字。
Bootstrap 3版本的条纹样式仅给tr设置背景色，不会修改td的文字颜色属性，因此给tr加文字色类可以通过继承正常生效。

• 方案1：修改JS逻辑，直接给行内td切换类
  把类直接加到td元素上，让样式直接命中目标元素，就能覆盖默认条纹样式，改动最小：

  $("#mytable tbody tr").click(function () {
      $(this).children("td").toggleClass("text-success")
  })
  

• 方案2：添加自定义CSS修正优先级
  如果不想改现有JS逻辑，可以加一段自定义样式，提升tr上.text-success作用到内部td的优先级，压过默认条纹规则：

  .table.table-striped tr.text-success > td {
      color: var(--bs-success);
  }
  

• 方案3：使用Bootstrap自带的行状态类
  如果允许带高亮背景，直接给tr切换BS内置的table-success类即可，这个类官方已经做了条纹场景下的优先级适配，不需要额外改样式：

  $("#mytable tbody tr").click(function () {
      $(this).toggleClass("table-success")
  })
  

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