Почему стиль не распространяется на мои элементы? - PullRequest
Новая
       9

Почему стиль не распространяется на мои элементы?

0 голосов
/ 20 апреля 2020

У меня есть приложение 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 как this 

.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. У меня есть tabview внутри моего основного элемента списка, то есть li, и я применяю некоторые отступы и ширину li из primeng tabview, но он не применяет мои собственные стили.

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

Я исправил эту проблему. Проблема была вызвана из-за ViewEncapsulation. Моя проблема решена, когда я положил ViewEncapsulation.None внутри моего компонента.

0 голосов
/ 20 апреля 2020

Вы можете использовать ng-deep и & opertor в s css, что указывает на родительский класс. 

::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;
          }
        }
      }
   }
 }
...