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.

Answer 3

You have to make custom styling to override the default bootstrap variable in scss.

You can find all possible variables here ../node_modules/bootstrap/scss/_variables.scss

Bootstrap also provide a custom file for us add our styling ../node_modules/bootstrap/scss/_custom.scss

for eg: here i am overriding two variable that effect my accordion (i changed some random colors)

$link-color:$brand-warning;
$card-bg:$green;

and dont forget to remove !default in _custom.scss and you done with the custom styling.

Now need to build the css from scss

First install npm install -g grunt-cli globally

then navigate to \\my-app\\node_modules\\bootstrap> npm install , this will install all dependencies.

Lastly run \\my-app\\node_modules\\bootstrap> grunt , this will creates the css file.

This should work hopefully.

In my case "bootstrap.min.css" was not generated correctly, so now iam using "../node_modules/bootstrap/dist/css/bootstrap.css " in my .angular-cli.json file.