How to style ng-bootstrap - Alternative / depth /

Question

I use the accordion component from ng-bootstrap in one of my applications and the /deep/ selector (aka: ::ng-deep and >>> ) to set its styles. However, I saw that this selector was deprecated .

Is there an alternative to setting ng-bootstrap component styles?

Answer 1

I did something and you can overwrite the ng-bootstrap styles if you turn off encapsulation viewing for the component, like this:

 @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 adjusting the styles for the modal dialog , because I assumed that my sample component should be displayed as modal and I want its width to be no more than 70% of the presentation port in small screen sizes:

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

Note that disabling view encapsulation means that the styles for this particular component will be available throughout the application, so other components will have access to them and will eventually use them if you are not careful.

Answer 2

Support for emulated / deep / CSS selectors (shadow piercing combinator of descendants aka →>) is deprecated to match the browser of implementations and Chroms that need to be removed. :: ng-deep was added to temporarily bypass solutions for developers currently using this function .

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

Answer 3

You need to make your own style to override the default bootstrap variable in scss.

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

Bootstrap also provides a custom file for us, adding our style ../node_modules/bootstrap/scss/_custom.scss

for example: here I redefine two variables that affect my accordion (I changed some random colors)

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

and don't forget to delete !default in _custom.scss , and you did it with a special style.

Now you need to build css from scss

First install npm install -g grunt-cli globally

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

Finally, run \my-app\node_modules\bootstrap> grunt , this will create a css file.

This should work reliably.

In my case, "bootstrap.min.css" is not generated correctly, so now I use "../ node_modules / bootstrap / dist / css / bootstrap.css" in my .angular-cli.json file.