如何在angular 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;
    }

视图封装= None表示Angular不进行视图封装。Angular将CSS添加到全局样式中。前面讨论的作用域规则、隔离和保护不适用。这在本质上与将组件的样式粘贴到HTML.

中相同

Answer 2

我刚刚在全局样式中添加了以下内容：

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

See plunker (全局样式在这里是index.html中的样式标签)