Question 252894 in Html Question posted in
Some basic documentation can be found here.

Html – 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:
enter image description here

Tags:

2

Answers


  1. 0

    Styling material components can be really tricky sometimes. What we use at our company is adding encapsulation in the component, like this:

    @Component({
  selector: 'button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  encapsulation: ViewEncapsulation.None
})

    This should help, but if it even doesn’t work, just use ::ng-deep

    Login or Signup to reply.
  2. 0

    When defining style rules in a component, only this component’s instances will apply the rules (as per view encapsulation).

    So if you put your CSS rule in the root "styles.css", the redefinition of rules (like for material) should apply (you can event add a selector like .i-want-that.mat-mdc-select-arrow so you can always have the material component like it was designed).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search