无法在 Angular Material 的 Select 中更改样式答案

【问题标题】：Unable to change style in Angular Material's Select无法在 Angular Material 的 Select 中更改样式
【发布时间】：2017-06-28 22:39:36
【问题描述】：

我一直在尝试在 Angular Material 的 MdSelect 内的覆盖面板内进行一些样式更改，以更改最大宽度属性（标准为 280 像素）。

我已经尝试了所有方法，例如使用 '!important' 属性覆盖 mat-select-panel 类，或使用 panelClass 输入（我正在通过它的类出现在类属性中，但似乎没有考虑）。

有人遇到过同样的问题吗？我该如何解决这个问题？

谢谢！

【问题讨论】：

【解决方案1】：

您可以在父组件的 CSS 中使用 /deep/ 指令。 See documentation here.

如果您要覆盖样式的组件有：

  <div class="foo">...</div>

你可以把你的父母或应用 css ：

/deep/ .foo {
   [ ... ]
}

【讨论】：

不幸的是，我也试过了。我用过 :host /deep/ .mat-select-panel { max-width: none !important; }，但它没有工作。
尝试一些肮脏但可见的东西，例如 :host /deep/ .mat-select-panel { background-color: red!important }，只是为了确定？您可能需要在此处根据您的用例覆盖更多 CSS（例如，宽度也可能受“显示”或“位置”影响）
也没什么...我一直在 Material 的 github 中搜索，我发现 mat-select-panel 中的 max-width 属性来自一个名为 mat- 的 sass mixin menu-base()，包含在 mat-select-panel 中。

【解决方案2】：

你可以尝试在 main css 中设置它。

.cdk-overlay-pane {
  .mat-select-panel {
    max-width: 700px;
  }

}

【讨论】：