Angular项目升级Bootstrap后自定义表格CSS失效求助

问题根源 #

Bootstrap 5.3对表格组件的样式机制做了两处关键调整，直接导致你的自定义样式被覆盖：

1. 选择器权重提升：Bootstrap 5.3改用更具体的选择器（如.table > tbody > tr）定义表格样式，比你原有的table tbody tr权重更高。
2. CSS变量引入：核心表格样式（背景、文字颜色等）改用CSS变量（如--bs-table-bg、--bs-table-striped-bg）定义，默认变量值会覆盖你写的静态样式。

可行解决方案 #

1. 提升自定义选择器的特异性 #

给你的表格选择器加上.table类（ng-bootstrap表格组件默认会自动添加这个类），让选择器权重和Bootstrap匹配：

table.table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: $main-font;
  min-width: 400px;

  thead {
    position: sticky;
    top: 0;
    z-index: 1;

    tr {
      background-color: $lt-gray;
      color: $black;
      text-align: left;
      z-index: 1;
    }
  }

  tbody {
    tr {
      color: $mallard;

      &:nth-of-type(even) {
        background-color: $white-smoke;
      }

      &:last-of-type {
        border-bottom: 2px solid $mallard;
      }

      &:hover {
        background-color: $mercury;
        color: $dim-gray;
      }

      td {
        vertical-align: middle;
        margin: 0;
      }
    }
  }
}

2. 调整Sass导入顺序，确保自定义变量优先 #

把你的自定义变量文件移到Bootstrap导入之前，这样你的Sass变量会直接覆盖Bootstrap的默认值，避免全局样式冲突：

// 先导入自定义变量，覆盖Bootstrap默认值
@import "./variables";
// 再定义Bootstrap专属配置变量
$table-striped-order: even;
$table-active-bg: rgba(102, 102, 102);
// 最后导入Bootstrap核心样式
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "./mixins";

3. 直接覆盖Bootstrap表格CSS变量（推荐） #

如果不想依赖选择器权重，可以直接覆盖Bootstrap的表格CSS变量，从根源上替换默认样式：

table.table {
  // 覆盖Bootstrap表格核心变量
  --bs-table-bg: transparent;
  --bs-table-striped-bg: $white-smoke;
  --bs-table-hover-bg: $mercury;
  --bs-table-color: $mallard;

  // 保留原有自定义样式
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: $main-font;
  min-width: 400px;

  thead tr {
    background-color: $lt-gray;
    color: $black;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  tbody tr:last-of-type {
    border-bottom: 2px solid $mallard;
  }
}

验证步骤 #

1. 打开浏览器开发者工具，选中表格元素，查看「样式」面板中哪些Bootstrap样式覆盖了你的自定义代码。
2. 确认自定义样式是否出现在样式列表中，若被划掉，说明优先级不足或被CSS变量覆盖，对应调整即可。

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