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

我创建了一个应用程序，其中我使用了material.angular.io中的md-autocomplete。如何覆盖棱角4中的md-autocomplete scss？

现在问题来了，当我试图搜索任何东西，建议的下拉宽度较小。所以我想增加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; 
    } 
    }

这有什么错，我在做什么？感谢

来源

2017-08-28 Bhushan Gadekar

我只是说这对全球的样式：

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

See plunker（全球风格都在这里index.html的风格标签）

来源

2017-08-28 10:57:40

请记住，这会影响应用程序中的_all_ autocompletes。目前没有好的方法来定位特定的自动完成组件，但https://github.com/angular/material2/pull/6618将添加该支持。 –

正确的方式做到这一点是设置在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; 
    }

查看封装=无意味着角确实没有视图封装。 Angular将CSS添加到全局样式中。前面讨论的规则，隔离和保护范围不适用。这个与将组件的样式粘贴到HTML中的基本相同。

来源

2017-08-28 13:30:57

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

回答

相关问题