如何设置ng-bootstrap样式 - 替代/深/

Question

我accordion在我的一个应用程序和/deep/(又名:::ng-deep和>>>)选择器中使用ng-bootstrap中的组件来设置其样式.但是我看到这个选择器已被弃用.

是否有替代方法来设置ng-bootstrap组件的样式？

Answer 1

我做了一些挖掘，如果关闭组件的视图封装，则可以覆盖 ng-bootstrap 样式，如下所示：

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ExampleComponent {

    constructor(public activeModal: NgbActiveModal) { }

}

例如，在这里我自定义模式对话框的样式，因为我假设我的示例组件应该显示为模式对话框，并且我希望其宽度在小屏幕尺寸下最大为视口的 70%：

.modal-dialog {
  @include media-breakpoint-down(xs) {
    max-width: 70vw;
    margin: 10px auto;
  }
}

请注意，关闭视图封装意味着该特定组件的样式将在整个应用程序中可用，因此其他组件将可以访问它们，并且如果您不小心，最终将使用它们。