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

Question

我一直在尝试在Angular Material的MdSelect中的叠加面板内进行一些样式更改，以便更改max-width属性（标准值为280px）。

我已经尝试了所有的东西，比如用'！important'attibutes覆盖mat-select-panel类，或者使用panelClass Input（我通过它的类出现在class属性中，但似乎没有采取考虑到）。

有没有人经历过同样的问题？ 我怎么解决这个问题？

谢谢！

Answer 1

您可以在父组件的CSS中使用/deep/指令。 请参阅此处的文档

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

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

你可以放入你的父母或app css：

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

Answer 2

您可以尝试在主css中设置它。

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

}