离子2:从导航栏中的自定义组件按钮中删除背景

时间:2016-05-18 11:41:06

标签: typescript angular styling custom-component ionic2

问:如何在下面的自定义组件上修复样式,使其看起来像加号,并使用<ion-buttons>指令中的继承样式?

我在导航栏中使用自定义组件:<notifications-bell></notifications-bell>,如下所示:

<ion-navbar *navbar header-colour>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>  
  <ion-buttons end>
    <notifications-bell></notifications-bell>
    <button>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-buttons>  
  <ion-title>Clients</ion-title>
</ion-navbar>

但是它使用背景颜色进行渲染:

enter image description here

这是我的组成部分:

import {Component} from 'angular2/core';

@Component({
    selector: 'notifications-bell',
    directives: [],
    template: `<button><ion-icon name="notifications-outline"></ion-icon></button>`
})
export class NotificationsBellComponent {
    constructor() {
    }
}

感谢。

1 个答案:

答案 0 :(得分:3)

我认为它就像删除背景和阴影一样简单?

button{
  background: none !important;
  background-color: none !important;
  box-shadow: none !important;
}