ng-select Angular2 panel transparent

Question

I have some problem with ng-select css, my dropdown panel color is transparent (normally default color is white) on Chrome and Firefox.

html

            <ng-select class="custom"[items]="mesurePoints2"
            bindLabel="name"
            bindValue="name"
            [ngModel]="actualMesurePoint.name"
            name="name"
             (ngModelChange)="mesurePointSelection($event)"
            >
           </ng-select>  

css

  .ng-select.custom {
  border:1px solid rgba(0, 0, 0, 0.15);
  height: 38px;
  border-radius: 0.25rem;
  background-color: white;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  font-family: sans-serif;
  }
  .ng-select.custom .ng-option {
  background-color: red;
  }

component

@Component({
selector: 'app-traffic-data',
templateUrl: './traffic-data.component.html',
styleUrls: ['./traffic-data.component.scss', '../../../app.disabled.scss',
    '../../../../../node_modules/@ng-select/ng-select/themes/default.theme.css'],

Answer 1

You need to use encapsulation in order to override children component's css:

@Component({
selector: 'app-traffic-data',
templateUrl: './traffic-data.component.html',
styleUrls: ['./traffic-data.component.scss', '../../../app.disabled.scss',
    '../../../../../node_modules/@ng-select/ng-select/themes/default.theme.css'],
encapsulation: ViewEncapsulation.None
})

Example stackbiltz here.