如何覆盖角度4中的md-autocomplete scss？

Question

我创建了一个应用程序，我使用了material.angular.io中的md-autocomplete。

现在当我尝试搜索任何内容时出现问题，建议的下拉列表宽度较小。 所以我想增加md-autocomplete的宽度。

我试过重写scss，内联scss但没有用。

以下是我的代码。

<div class="fill-remaining-space">
  <md-input-container class="example-full-width" color="accent">
    <md-icon mdPrefix>search</md-icon>
    <input type="text" mdInput [mdAutocomplete]="auto" [formControl]="searchCtrl">
    <md-icon mdSuffix (click)="clear()">clear</md-icon>
  </md-input-container>
  <md-autocomplete #auto="mdAutocomplete" id="autocomplete">
    <md-option *ngFor="let result of filteredResults" [value]="result.name">
      <span [routerLink]="['/category',result.type]" class="row"> {{result.name | lowercase}}<span>&nbsp; in &nbsp;<span class="type"> {{result.type}} </span></span>
      </span>
    </md-option>
  </md-autocomplete>
</div>

我试图使用以下方法覆盖此scss：

.fill-remaining-space {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 9px;
    margin-left: 14%;
    width: 74%;
    .mat-autocomplete-panel.mat-autocomplete-visible /deep/ {
      background-color: blue !important;
    }
  }

我在做什么问题？ 谢谢

Answer 1

正确的方法是在组件上将View Encapsulation设置为None：

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

然后在您的组件css中，您可以完全按照您的尝试进行操作：

.mat-autocomplete-panel.mat-autocomplete-visible {
      background-color: blue !important;
    }

View Encapsulation = None表示Angular不进行视图封装。 Angular将CSS添加到全局样式中。 前面讨论的范围规则，隔离和保护不适用。 这与将组件的样式粘贴到HTML中基本相同。

Answer 2

我刚刚将它添加到全局样式中：

.mat-autocomplete-panel {
    width: 30rem;
}

请参阅plunker （全局样式在这里是index.html中的样式标记）