如何覆蓋角度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中的樣式標記）