How to Style ng-bootstrap - Alternative to /deep/

Question

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.

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

Answer 1

Support for the emulated /deep/ CSS Selector (the Shadow-Piercing descendant combinator aka >>>) has been deprecated to match browser implementations and Chrome’s intent to remove. ::ng-deep has been added to provide a temporary workaround for developers currently using this feature.

From here: http://angularjs.blogspot.com/2017/07/angular-43-now-available.html

Answer 2

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) { }

}

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.