Angular2 Material: Hinzufügen von benutzerdefinierten Stilen zu MD-Checkbox

Question

Das einzige, was ich will, ist md-checkbox Basis Breite und Höhe neu schreiben. Ich will es nicht tun, dauerhaft für alle Website, nur für eine Komponente, wo ich md-checkbox

So fügte ich, hier ist meine Komponente

@Component({ 
    selector: 'my-component', 
    moduleId: module.id, 
    templateUrl: 'share/grid/my-component.html' 
}) 

export class MyComponent {} 

Und mein-component.html

<md-checkbox></md-checkbox> 

Also scheinbar muss ich auf Kind-Komponenten-Stile zugreifen, wie kann ich das tun? Vielen Dank.

Answer 1

Mit dem Selektor /deep/ können Sie Ihre Stile in der Komponentenstruktur und in allen untergeordneten Komponenten erzwingen. Platzieren Sie die tiefen Stile im Stylesheet Ihrer Komponente. Hier sehen Sie ein Beispiel für vorrangige Materialdesignstile für eine Schaltfläche. Es sollte leicht sein, die Anpassungen vorzunehmen, die Sie zum Targeting der relevanten Checkbox-Klassen benötigen.

:host /deep/ { 
    .md-button-ripple, 
    .md-button-focus-overlay { 
     display: none; 
    } 
} 

Dies sollte nur verwendet werden, wenn Sie emulierten ViewEncapsulation verwenden (die Standardeinstellung)

You can read more about ViewEncapsulation and associated styling techniques in the Angular documentation.

Answer 2

Hier ist eine Arbeitslösung:

@Component({ 
    selector: 'my-component', 
    moduleId: module.id, 
    templateUrl: 'share/grid/my-component.html', 
    styles: [`:host /deep/ .mat-checkbox-inner-container { 
       height:15px; 
       width:15px; 
      } 
    `] 
}) 

export class MyComponent {}