::ng-deep is affecting other components in material-CodePudding

I need a changes in mat-menu-content for specific component but its affecting every other components too and i tried view encapsulation and :host ::ng-deep but there's no changes

 ::ng-deep .mat-menu-content {
            padding-top: 8px !important;
            padding-bottom: 8px !important;
            display: flex !important;
          }

I need like this in mat-menu-content

But its affecting others components too like this

CodePudding user response：

can you please make one tag in html and set "maincss" class after in that tag add your html code.

also write your cass like this :

.maincss{
.mat-menu-content {
            padding-top: 8px !important;
            padding-bottom: 8px !important;
            display: flex !important;
          }
}

CodePudding user response：

Be careful with the use of ::ng-deep beacause actually can affect other styles since it can go over the encapsulation of the components and change styles. Consider instead using the @Input() properties that <mat-menu> provides to modify the styles: backdropClass and panelClass

This is a simple example that you could adapt to your code according to your requirements:

<mat-menu backdropClass="my-menu-backdrop" panelClass="my-menu-panel">
  <menu mat-menu-item>Profile</menu>
  <menu mat-menu-item>Account</menu>
</mat-menu>

Then in your global styles define your classes with your styles:

.my-menu-backdrop {
  // Put your styles for menu backdrop
}

.my-menu-panel {
  // Put your styles for menu panel
}

There are more properties that could be useful for you. For more information about this props you could check the docs here