Ionic 2: Entfernen Hintergrund von benutzerdefinierten Komponente Schaltfläche in Navbar

Question

Q) Wie repariere ich das Styling auf die benutzerdefinierte Komponente unten, so dass es wie das Pluszeichen aussieht, mit geerbtem Styling von der <ion-buttons> Direktive?

Ich verwende eine benutzerdefinierte Komponente in meinem navbar: <notifications-bell></notifications-bell>, etwa so:

<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> 

Aber es ist mit einer Hintergrundfarbe Rendering:

Hier ist meine Komponente:

import {Component} from 'angular2/core'; 

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

Danke.

Answer 1

Ich würde annehmen, dass es so einfach ist, wie Hintergrund und Schatten zu entfernen?

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