Difficulty styling width of matSelect

Question

https://plnkr.co/edit/aUYfOBJ0MdywKW2pphOM?p=preview

<md-select placeholder="food" style=""><!-- no width stylings that work -->
    <md-option *ngFor="let food of foods" [value]="food.value">
        {{ food.viewValue }}
    </md-option>
</md-select>

Please see above plunker. I am having a lot of difficulty styling the width of the md-select with placeholder of 'food' . Why can't I do a style="" in the md-select tag? I have tried targeting this same div with a class with no response. I have also tried using the .md-select-trigger class that is visible in F12 tools of chrome, firefox, and ie edge. Nothing.

The only thing that works is deselecting the min-width or flex space-around of the .md-select-trigger class that is available in the tools area of browser.

I am not sure what I am dealing with here.

Answer 1

Might be a bit late, but anyway... To do this properly, you need 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 just do this:

.mat-select-trigger { min-width: 50px; }

From the link I posted:

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

To add to purwa astawa's answer you can use /deep/ in your components css to change the .mat-select-trigger min-width

.mat-select /deep/ .mat-select-trigger {
  min-width: 60px;
}

This is because .mat-select-trigger is being styled within the md-select module which is not normally accessible by your component.

The above method will soon be depricated. Use ViewEncapsulation.None instead. View Encapsulation