Question

我创建了一个显示通知的组件，但模板通知默认css未应用于组件

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="ti-bell"></i>
        <p class="notification" style="color:crimson; font-size: 12px; vertical-align:top;"><b>{{totalNotifications}}</b></p>
        <p>Notificações</p>
        <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
        <li *ngFor="let notification of notifications" ><a [routerLink]="['/callInfo']" [queryParams]="{call:notification.call}">{{setName(notification)}}</a></li>
  </ul>

菜单中的

    <ul class="nav navbar-nav navbar-right">
                <li class="dropdown" style="margin-top:25px">
                    <notifications-cmp ></notifications-cmp>
                </li>

纸dashboard.css

.navbar .navbar-nav > li > a {
  line-height: 1.42857;
  margin: 15px 0px;
  padding: 10px 15px;
}
.navbar .navbar-nav > li > a i,
.navbar .navbar-nav > li > a p {
  display: inline-block;
  margin: 0;
}
.navbar .navbar-nav > li > a i {
  position: relative;
  top: 1px;
}
.navbar .navbar-nav > li > a.btn {
  margin: 18px 3px;
  padding: 7px 18px;
}
.navbar .btn {
  margin: 15px 3px;
  font-size: 14px;
}
.navbar .btn-simple {
  font-size: 16px;
}

.navbar-nav > li > .dropdown-menu {
  border-radius: 6px;
  margin-top: -5px;
}

这是css的一部分内联组件内部的元素我做了以下更改添加此行

.navbar .navbar-nav > .dropdown > notifications-cmp  > a i,
.navbar .navbar-nav > .dropdown > notifications-cmp  > a p {
  display: inline-block;
  margin: 0;
}

如果我将其直接放入导航栏，它可以正常工作，但使用<notifications-cmp ></notifications-cmp>无法正常工作

我希望它忽略标签，修复css会非常费力和耗时。

感谢您的帮助

CSS不适用于组件

0 个答案: