我如何覆盖 ngx carousel css 以禁用导航

Question

I am using ngx carousel in my angular project and want to disable navigation arrows .I have already tried following code but none worked

 .carousel-control {
 display: none;
 }

it looks like my css is not able to override the ngx bootstrap css. can anyone help me with this

Answer 1

try

::ng-deep .carousel-control {
  display: none;
}

But FYI ng-deep is not a good way of doing things, ideally there is should be @Input field in that ngx carousel so you can configure navigation.

Answer 2

you can use

:host ::ng-deep {
    .carousel-control {
        display: none;
     }
}

If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.