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

请参阅上面的plunker。我在设置占位符为 'food' 的 md-select 宽度时遇到很多困难。为什么我不能在 md-select 标签中使用 style=""？我试过用一个没有响应的类来定位同一个 div。我也尝试过使用在 chrome、firefox 和 ie edge 的 F12 工具中可见的 .md-select-trigger 类。没有。

唯一有效的方法是取消选择浏览器工具区域中可用的 .md-select-trigger 类的最小宽度或 flex space-around。

我不确定我在这里处理的是什么。

Answer 1

可能有点晚了，但无论如何......要正确执行此操作，您需要设置 View Encapsulation在您的组件上设置为无:

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

然后在你的组件 css 中你可以这样做:

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

来 self 发布的链接:

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.