css - ng-select Angular2面板透明

Question

我的 ng-select css 有一些问题，我的下拉面板颜色在 Chrome 和 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({
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

您需要使用 encapsulation为了覆盖子组件的 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 .