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.我也尝试使用.md-select-trigger类,它在chrome,firefox和edge的F12工具中可见.没有.

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

我不确定我在这里处理什么.

Answer 1

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

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

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

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

从我发布的链接:

View Encapsulation = None表示Angular不进行视图封装.Angular将CSS添加到全局样式中.前面讨论的范围规则,隔离和保护不适用.这与将组件的样式粘贴到HTML中基本相同.

Answer 2

要添加到purwa astawa的答案,您可以在组件css中使用/ deep /来更改.mat-select-trigger最小宽度

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

这是因为.mat-select-trigger在md-select模块中设置样式,组件通常无法访问该模块.

上述方法很快将被删除.请ViewEncapsulation.None改用.查看封装

Answer 3

我使用它（在全局样式文件中）来修补它。

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