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

问题描述

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

I am using the accordion component from ng-bootstrap in one of my apps and the /deep/ (aka: ::ng-deep and >>>) selector to set its styles. However I saw this selector has been deprecated.

是否可以设置ng-bootstrap组件的样式?

Is there an alternative to set the styles of the ng-bootstrap components?

推荐答案

我已经进行了一些挖掘，如果您关闭查看组件的封装，例如:

I've done some digging and it is possible to overwrite the ng-bootstrap styles if you turn off the view encapsulation for a component, like so:

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

    constructor(public activeModal: NgbActiveModal) { }

}

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

For example, here I am customizing the styles for a modal dialog, because I assumed that my example component should be shown as a modal dialog and I want its width to be at maximum 70% of the view port in small screen sizes:

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

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

Please note that turning off the view encapsulation means that the styles for this particular component will be available throughout the application, therefore other components will have access to them and will eventually use them if you are not careful.

这篇关于如何设置ng-bootstrap的样式-替代/deep/的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！