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

user_839211 0
Viewed 2419

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?

ng-bootstrap twitter-bootstrap angular css
3 Answers

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.

user_8392110
Related