无法更改Angular Material的样式选择

Question

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

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

有没有人经历过同样的问题？我该如何解决这个问题？

谢谢！

Answer 1

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

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

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

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

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

Answer 2

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

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

}