Angular项目中表格内btn-primary按钮默认颜色与同类按钮不一致如何解决

问题原因 #

这是CSS优先级和样式继承共同导致的异常：

• 你定义的table.table.table-bordered选择器优先级（标签选择器+2个类选择器，权重21）高于Bootstrap默认.btn-primary的选择器优先级（单类选择器，权重10），如果你的项目里有样式把.btn的默认背景设置为transparent（要么是自定义修改过Bootstrap，要么是有其他全局样式覆盖），按钮默认状态就会直接透出父级表格的背景色，所以你改表格背景色的时候按钮颜色也跟着变。
• 鼠标悬停时按钮显示正常，是因为Bootstrap给.btn-primary:hover设置的选择器优先级更高，有单独定义的背景色，不会透出父级背景。

修复方案 #

你可以任选以下任意一种方法解决：

• 给按钮添加更高优先级的自定义样式，强制显示primary色
  在全局样式或者对应组件的样式文件中添加：

  .table .btn-primary {
      background-color: var(--bs-primary);
      border-color: var(--bs-primary);
  }
  

  这个选择器权重高于现有表格背景的选择器，不会被覆盖。如果你的项目没有定义Bootstrap的CSS变量，直接替换为对应颜色值比如#0d6efd即可。
• 调整表格背景样式的作用范围，避免被子元素继承
  将现有表格样式修改为：

  table.table.table-bordered{
      border:1px solid #ccc;
      background:#fff;
      background-clip: border-box;
  }
  

  也可以单独给表格单元格设置背景，避免影响内部元素：

  table.table.table-bordered td, table.table.table-bordered th {
      background: #fff;
  }
  

• 紧急情况下可以给按钮加行内样式强制生效（不推荐长期使用，会影响后续样式维护）

  <button (click)="remove(tempCartItem)" class="btn btn-primary btn-sm mt-2" style="background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important;">Remove</button>
  

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