同时引入Bootstrap和MDBootstrap时如何指定使用Bootstrap的table类

问题原因 #

你当前的样式引入顺序是先加载Bootstrap、后加载MDBootstrap，CSS中同优先级的选择器，后加载的样式规则会覆盖先加载的规则，因此MDBootstrap的.table类样式优先级更高，覆盖了Bootstrap自带的同名类样式。

可行解决方案 #

• 方案1：定制MDBootstrap构建包（最干净的方案）

  如果你使用的是可定制的MDBootstrap构建版本，可以在构建配置中直接排除table组件对应的样式模块，这样MDBootstrap最终输出的CSS文件不会包含任何table相关的样式规则，页面会自动使用Bootstrap自带的.table类样式，不会影响其他MDBootstrap组件的正常使用。

• 方案2：自定义高优先级样式（无需修改依赖，最灵活）

  不需要调整现有依赖的引入顺序，也不需要修改构建配置，只需要新增一个自定义类给需要使用原生Bootstrap样式的table即可：
  1. 给table标签新增自定义类，比如bs-native-table：

  <table class="bs-native-table table table-hover">
      ...
  </table>
  

  2. 从你本地引入的bootstrap.min.css中提取所有table相关的样式规则，给每个规则的选择器前加上.bs-native-table提高优先级，再把这些规则放到你自己的自定义CSS文件中，举个核心规则示例：

  /* 自定义CSS需要在MDBootstrap的CSS之后引入，保证优先级足够 */
  .bs-native-table.table {
    --bs-table-color: #212529;
    --bs-table-bg: transparent;
    --bs-table-border-color: #dee2e6;
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-table-border-color);
  }
  .bs-native-table.table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg, transparent);
  }
  .bs-native-table.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
  }
  

  这种方式的选择器优先级高于MDBootstrap的单类选择器，会优先生效，且不会影响其他使用MDBootstrap样式的组件。

• 方案3：临时应急用!important修饰（不推荐长期使用）

  如果你只是临时调试，可以给Bootstrap的table样式规则加上!important修饰强制提高优先级，但是长期使用会导致样式优先级混乱，提升后续维护成本，示例：

  .table {
    background: #fff !important;
    border-color: #dee2e6 !important;
    /* 其他需要覆盖的样式都加!important */
  }
  

注意：不推荐直接调整两个依赖的引入顺序，如果把Bootstrap放在MDBootstrap之后引入，所有同名类的样式都会被Bootstrap覆盖，会导致你其他依赖MDBootstrap的组件样式异常。

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