如何覆蓋棱角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？

回答

相關問題