如何在角度 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

正确的方法是在组件上将视图封装设置为无：

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

然后在你的组件 css 中，你可以完全按照你尝试过的事情做：

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

视图封装 = 无 表示 Angular 不查看 封装。Angular 将 CSS 添加到全局样式中。范围界定 前面讨论的规则、隔离和保护不适用。这 本质上与将组件的样式粘贴到 .HTML。

Answer 2

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

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

参见 plunker(全局样式在这里是索引中的样式标签.html)