How to set the styles of the ng-bootstrap components?

It is possible to overwrite the ng-bootstrap styles if we 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 we are customizing the styles for a modal dialog, because we assumed that our example component should be shown as a modal dialog and we 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.