angular - How does mat-autocomplete classList Input work?

Question

According to the MatAutocomplete documentation, there is a classList input to style the panel.

@Input('class') classList: string | string[]

Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.

When I do <mat-autocomplete #auto="matAutocomplete" classList="test-class"> I expected that I would see the test-class added to the mat-autocomplete-panel? But this does not work.

Can someone please explain how this input is to be used?

Stackblitz

Answer 1

I figured it out. The docs say that it takes classes "set on the host mat-autocomplete".

That's the part I missed. You need to set class="test-class" as well

<mat-autocomplete #auto="matAutocomplete" class = "test-class" classlist="test-class">

I also realized that the css must be in your app's base styles.css file and not in your component css file for it to work. It's probably because your panel will be inside an overlay outside of your component

Working stackblitz

Edit

OR as Ankit Singh pointed out in his answer, you can use ::ng-deep if you still want to do it in the component css file...

::ng-deep .test-class {
  background-color: blue;
}

Answer 2

As per Pieter Buys Anwser i would to add

you can ng-deep

in .css file if you want you css to be encapsulated

Working stackblitz

Answer 3

If you want to customize (without classlist and still with encapsulation), in your style.css

.mat-autocomplete-panel:hover {
  .mat-option:hover {
    background: blue;
    color: white;
  }
}