Question

我有一个具有材质按钮菜单的EntryComponent。当我尝试使用:: ng-deep覆盖默认样式时，样式也会更改父组件中所有按钮组件。

 <style>
 ::ng-deep .mat-button{
  max-width: 50px !important;
  min-width: 45px !important;
  height: 5em;
 }
 ::ng-deep .mat-button-ripple mat-ripple{
  max-width: 40px !important;
  min-width: 20px !important;
 }
 </style>

我还尝试使用类来定位样式，但它不像普通的CSS那样工作。

 <style>
 .actions ::ng-deep .mat-button{
  max-width: 50px !important;
  min-width: 45px !important;
  height: 5em;
 }

 .actions ::ng-deep .mat-button-ripple mat-ripple{
  max-width: 40px !important;
  min-width: 20px !important;
 }
 </style>

请分享您的经验或知识。

条目组件

<button md-button [mdMenuTriggerFor]="menu" class="actions">
<md-icon>flash_on</md-icon></button>
<md-menu #menu="mdMenu">

  <button md-menu-item>
    <md-icon>autorenew</md-icon>
  </button>

  <button md-menu-item>
   <md-icon>border_color</md-icon>
  </button>

  <button md-menu-item>
   <md-icon>delete</md-icon>
  </button>

  <button md-menu-item>
   <md-icon>perm_identity</md-icon>
  </button>

  <button md-menu-item>
   <md-icon>payment</md-icon>
  </button>
</md-menu>

PS：这不是一个重复的问题，因为我们能够全局设置材质元素，但问题是如何通过Id或Class设置目标dom元素的样式。希望这能解决困惑

Answer 1

正如Milad已经回答的那样，只需要使用这种造型

<style>
:host /deep/ .actions{
  max-width: 50px !important;
  min-width: 45px !important;
  height: 5em;
}

:host /deep/ .actions .mat-button-ripple mat-ripple{
  max-width: 40px !important;
  min-width: 20px !important;
}
</style>

使用CSS在角度材质2元素内通过Id或Class定位特定元素样式

1 个答案: