为什么样式不适用于我的元素？

Question

我有一个angular应用程序，其中我有我的嵌套下拉菜单。在其中一个列表项中，我有primeng Tabview在该列表项中，如下所示

<li *ngIf="user.role !== 'super'" class="nav-item flex-center-center flex-column min-width-40 no-border custom-bell-padding notifications-dropdown">
<a class="nav-link" id="notificationsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true">
    <i class="fal fa-bell font-26"></i>
</a>
<div class="dropdown-menu" aria-labelledby="notificationsDropDown" (click)="onClick($event)">
    <span class="dropdown-menu-arrow"></span>
    <div class="ui-g header-dropdown-list">
        <div class="ui-g-12 list-item-border-bottom">
            <div class="ui-g-6">
                <p class="font-11 pb-0">Your Notifications</p>
            </div>
            <div class="ui-g-6 font-11 text-right">
                <app-checkbox [disabled]="disabled" label="Technician updates" [isChecked]="true"></app-checkbox>
            </div>
        </div>
        <div class="ui-g-12">
            <p-tabView class="tab-panel-underline">
                <p-tabPanel header="All">
                    <ng-template pTemplate="content">
                    </ng-template>
                </p-tabPanel>
                <p-tabPanel header="Critical">
                    <ng-template pTemplate="content">
                    </ng-template>
                </p-tabPanel>
            </p-tabView>
        </div>
    </div>
</div>

​

现在，我在component.scss中应用自定义样式，如下所示

.notifications-dropdown{
  .dropdown-menu {
   left: 843px !important;
   margin: -0.875rem 0 0;
   font-size: 0.875rem;
   color: #7A8281;
   text-align: left;
   list-style: none;
   border: 0 solid #c8ced3;
   box-shadow: 0px 3px 6px #00000029;
   z-index: 99999;
   top: 74px;
   border-radius: 0px;
   width: 20rem;
   /* min-width: 18.2rem; */
   /* right: 0px; */

         .header-dropdown-list{
    // height: 150px;
    .list-item-border-bottom{
      border-bottom: 1px solid #e5e6e6;
    }
    p-tabview.tab-panel-underline {
        .ui-tabview{
          padding: 20px !important;
          .ui-tabview-nav li{
            width: 50% !important;
            padding: 0px !important;
          }
        }
      }
   }
 }

但我的样式不适用于primeng tabview。我在我的主列表项(即li )中使用了这个tabview，并应用了一些li of primeng tabview的填充和宽度，但它没有应用我的自定义样式。

Answer 1

您可以在引用父类的scss中使用ng-deep和& opertor。

::ng-deep .notifications-dropdown{
  .dropdown-menu {
   left: 843px !important;
   margin: -0.875rem 0 0;
   font-size: 0.875rem;
   color: #7A8281;
   text-align: left;
   list-style: none;
   border: 0 solid #c8ced3;
   box-shadow: 0px 3px 6px #00000029;
   z-index: 99999;
   top: 74px;
   border-radius: 0px;
   width: 20rem;
   /* min-width: 18.2rem; */
   /* right: 0px; */

         .header-dropdown-list{
    // height: 150px;
   & .list-item-border-bottom{
      border-bottom: 1px solid #e5e6e6;
    }
   & p-tabview.tab-panel-underline {
       & .ui-tabview{
          padding: 20px !important;
         & .ui-tabview-nav li{
            width: 50% !important;
            padding: 0px !important;
          }
        }
      }
   }
 }

Answer 2

我已经解决了这个问题。这个问题是由ViewEncapsulation引起的。当我将ViewEncapsulation.None放入我的组件中时，我的问题就解决了。