能否在Angular项目中结合带前缀的自定义Bootstrap CSS使用ng-bootstrap？

直接用ng-bootstrap不可行 #

ng-bootstrap的组件内部硬编码了原生Bootstrap的类名（比如modal、dropdown、form-control），官方压根没做自定义前缀的配置支持，所以没法直接和你的带前缀Bootstrap配合使用——组件渲染出来的类名和你的样式类对不上，样式完全失效。

可行的替代方案 #

• 手动覆盖类名
  要么在组件里用HostBinding给ng-bootstrap组件追加带前缀的类，比如：

  import { HostBinding } from '@angular/core';
  
  @HostBinding('class.prefix-dropdown') isDropdown = true;
  

  要么在全局样式里用Sass/Less的@extend把原生类继承带前缀的样式：

  .dropdown {
    @extend .prefix-dropdown;
  }
  .modal {
    @extend .prefix-modal;
  }
  

  纯CSS的话就只能手动把带前缀的样式规则复制一份给原生类，麻烦但能用。

• 换用Angular Material
  Material的组件不依赖Bootstrap，完全可以自定义主题来匹配你带前缀Bootstrap的视觉风格，下拉、模态框、选择器这些功能它都有，彻底避开类名冲突的问题。

• 自己封装基础组件
  基于你的带前缀Bootstrap，自己写一套Angular组件（比如PrefixDropdown、PrefixModal），直接用带前缀的类名写模板，虽然前期要花点时间开发，但完全适配你的项目要求，后续维护也灵活。

• 双版本Bootstrap共存（如果允许）
  要是项目只要求业务代码用带前缀的Bootstrap，你可以生成两份Bootstrap样式：一份给业务用的带前缀版本，一份给ng-bootstrap用的原生无前缀版本，然后通过组件样式隔离（比如Angular的encapsulation）避免两种样式互相干扰。

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