How to change the style of the mat-pseudo-checkbox of only a specific component?-CodePudding

I want only the mat-pseudo-checkbox of a specific component will be affected. I don't want all of the mat-pseudo-checkbox of the whole project will be changed.

When I'm using ::ng-deep to change the style of the mat-pseudo-checkbox, all the mat-pseudo-checkbox of the whole project are affected, and not only the mat-pseudo-checkbox inside a specific component as I expected.

My code, placed in the style of the specific component:

::ng-deep .mat-pseudo-checkbox {
   display: none !important;
}

The element I want to be affected: <mat-option #option...></mat-option>

CodePudding user response：

you can add a special class to the needed mat-pseudo-checkbox, for example

<mat-pseudo-checkbox >

and add the class to CSS selector

::ng-deep .needed-element .mat-pseudo-checkbox {
   display: none !important;
}

CodePudding user response：

If you remove the multiple directive from <mat-select></mat-select> the checkboxes should not be displayed.

If you want to do it using CSS then you need to add a panel class, this will allow you to specify the options that you want to modify.

<mat-select multiple panelClass="test-class">
...
</mat-select>

::ng-deep .test-class .mat-pseudo-checkbox {
  display: none !important;
}

to avoid using ::ng-deep you can place the CSS rules in the styles.css file at the root

CodePudding user response：

In your top-level styles.scss/styles.css, add the styles scoped to your component's selector:

SCSS:

my-component {
  .mat-pseudo-checkbox {
    // custom styles here
  }
}

CSS:

my-component .mat-pseudo-checkbox {
  // custom styles here
}