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 解决方案对我不起作用。但是将 appendTo="body" 属性添加到 ng-select 对我来说就像魔术一样。

您可以参考 ng-select 库上的 this issue thread 了解更多详情。

Answer 2

您需要使用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

ng-select Angular2面板透明

2 个答案: