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

Question

I've been trying to make some style changes inside the overlay panel inside an Angular Material's MdSelect, in order to change max-width property (which is 280px by standard).

I already tried everything, like overwriting the mat-select-panel class with '!important' attibutes, or using the panelClass Input (the class I'm passing through it appears inside the class attribute, but it doesn't seem to be taken into consideration).

Has anyone been through the same issue? How can I solve this?

Thank you!

Answer 1

You can use the /deep/ instruction in your parent componenent's CSS. See documentation here.

If the component you want to override the styles has :

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

You can put in your parents or app css :

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

Answer 2

You can try set it in main css.

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

}