How to remove padding in the mat-select-panel

Question

How do I remove this padding for the ma-select-panel.

I have tried using

ng:deep .mdc-menu-surface.mat-mdc-select-panel {
padding: 0px !important;
}

But I just couldn't remove it.

Any help would be greatly appreciated, thanks in advance for your help.

Answer 1

See that a mat-select create a cdk-overlay. This means that the "panel" is "outside" the component -really is outside the whole app-.

This is the reason you need makes the .css was in any way "global".

I generally use the styles.css (not the component.css)

div.mat-mdc-select-panel
{
    padding:0;
}

If you don't want this .css is applied to all the mat-select in your application is when you use the property panelClass this allow you write

<mat-select panelClass="custom-select">
   ...
</mat-select>

And use

.custom-select.mat-mdc-select-panel {
  padding:0;
}

There're another option that it's use

encapsulation: ViewEncapsulation.None

But I don't like so much because this makes that all the .css in your component is applied to all the applicacion -it's the same that include the component.css in your styles.css