How to replace ::ng-deep in Angular Material 15

How to apply style for Angular Material 15 elements? Nothing except ::ng-deep is working for me. According to official docs https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep ::ng-deep is deprecated so I want to avoid using it.

E.g. I want to hide/remove select arrow in mat-select. I have a code like this and it doesn't work without ::ng-deep. I also tried to write the code from the root, css variables but it also didn't work.

HTML

<div class="div-test">
  <mat-select [(value)]="selected.id">
    <mat-option value="en"></mat-option>
    <mat-option value="nl"></mat-option>
  </mat-select>
</div>

CSS

.mat-mdc-select-arrow  {
 display: none;
}

How does it look:

Yes, using ::ng-deep or similar is never a good idea. In your case you could either check if the framework supports this per API, find alternatives or define this style in the global styles with unique class name to avoid conflicts. For example:

your-component.html

<mat-select class="no-arrow">
  ...
</mat-select>

styles.css (or scss or project defined. global styles)

mat-select.no-arrow .mat-mdc-select-arrow-wrapper {
  display: none;
}

/* or on native select (matNativeControl) */
select.no-arrow::after {
  display: none;
}

You could also make your class name more unique like select-no-arrow. By default, you cannot access the styles of elements inside Angular Material components, because they are encapsulated.