How to override md-autocomplete scss in angular 4?

Question

I have created an app where I have used md-autocomplete from material.angular.io.

Now problem comes when I am trying to search anything , the dropdown of suggestions has less width. So I want to increase the width of md-autocomplete.

I have tried overriding scss, inline scss but no use.

Below is my code.

<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>

I am trying to override this scss using:

.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;
    }
  }

Is there anything wrong I am doing? Thanks

Answer 1

The proper way to do it is to set the View Encapsulation to None on your component:

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

Then in your component css you can do exactly what you tried:

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

View Encapsulation = None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

Answer 2

I just added this to the global styles:

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

See plunker (the global styles are here the style tags in index.html)