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设置为无：

@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 min-width

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

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

上述方法很快就会被删除。请改用ViewEncapsulation.None。 View Encapsulation

Answer 3

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

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

matSelect难度造型宽度

3 个答案: