Verwenden von MDC-Komponenten in meiner eckigen CLI-Anwendung

Question

Ich habe geklont und eckig-cli quickstart.I versuchen, Material Design Web-Komponenten in it.I wollen nur die MDCCheckbox, so habe ich den folgenden Befehl npm install --save @material/checkbox, die das Kontrollkästchen ohne installiert installiert jede errors.Then i platziert Checkbox schablone in meinem app.component.html

<div class="mdc-form-field"> 
<div class="mdc-checkbox"> 
    <input type="checkbox" 
     id="my-checkbox" 
     class="mdc-checkbox__native-control"/> 
<div class="mdc-checkbox__background"> 
    <svg class="mdc-checkbox__checkmark" 
     viewBox="0 0 24 24"> 
    <path class="mdc-checkbox__checkmark__path" 
      fill="none" 
      stroke="white" 
      d="M1.73,12.91 8.1,19.28 22.79,4.59"/> 
    </svg> 
    <div class="mdc-checkbox__mixedmark"></div> 
</div> 
</div> 
<label for="my-checkbox">My Checkbox Label</label> 
</div> 

I MDCCheckbox, MDCCheckboxFoundation von @material/checkbox in meinem app.module.ts und fügte sie in meiner Einfuhren Liste importiert haben. Aber ich finde nicht die verwendeten Materialstile.Ist etwas nicht in Ordnung, was ich tue? Kann jemand mir bitte helfen

Answer 1

Scheint wie Sie vermissen die @material/checkbox Stile in Ihre Anwendung importieren.

const MDC_CHECKBOX_STYLES = require('@material/checkbox/dist/mdc.checkbox.css'); 

@Component({ 
    styles: [String(MDC_CHECKBOX_STYLES), /* ... */], 
}) 
class CheckboxComponent { 
    // Use MDCCheckbox within this component's template 
}; 

Wir haben ein Beispiel dafür, wie dies in unseren framework-examples/angular2 Ordner für angular2 zu tun: https://github.com/material-components/material-components-web/blob/master/framework-examples/angular2/src/app/components/checkbox/checkbox.ts#L38

Das Beispiel in unserer Repo verwendet angular2-Samen, nicht eckig CLI und lädt unsere Sass, aber mit CSS stattdessen sollte relativ einfach sein. Ich konnte wirklich keine offiziellen Dokumente darüber finden, wie man CSS für Drittanbieter-Bibliotheken in das angular-cli repo einbindet, aber ich habe this issue comment gefunden, das zu erklären scheint, wie man das macht.