Angular2 Material2 wie man Elemente style

Question

Ich bin neugierig, warum einige meiner scss nicht richtig mit den angular-material2 Elementen arbeiten. Ich benutze Node-Sass, um meine scss zu kompilieren und es scheint nicht die CSS-Dateien richtig zu beeinflussen. Zum Beispiel verwende ich die material2 Demo-App, die dies hat:

.demo-sidenav-layout { 
    md-sidenav { 
     background-color: $left_nav; 
     padding: 10px; 
    } 
} 

(Ich habe die Hintergrundfarbe hinzugefügt). Ist das der richtige Weg, um die Elemente zu stylen oder sollte ich nur Klassen verwenden? Wenn ich nur eine Klasse mit der gewünschten Hintergrundfarbe hinzufügte, wurde diese mit dem Standardelementstil überschrieben.

Answer 1

Material2 verwenden eine Themenbasis für Elemente im Kern. Sie können den Stil mit Mixins mit Sass ändern oder ein für Ihre App spezifisches Thema definieren. Die Art und Weise für die Verwendung dieser ist:

Erstellen Sie zunächst ein Thema die offizielle Dokumentation mit:

• https://material.angular.io/guide/theming

Zweitens erstellen mixin für eine Komponente ausgewählt:

Die Weg für das abgeschlossen ist, ist einfach. Sie müssen eine neue Komponenten erstellt, zum Beispiel

ng g c components/my_component_styleded 

diese erstellen 4 Dateien:

• my_component_styleded.component.html
• my_component_styleded.component.html.scss
• my_component_styleded.component.spec .ts
• my_component_styleded.component.html.ts

In der * .scss Include den allgemeinen Stil für Ihre Komponente (Struktur-Stil) und in der * .html-Datei enthalten die Struktur HTML für Ihre Komponente. Zum Beispiel:

<div> 
<button md-raised-button routerLink="/stock">STOCK OF PRODUCTS</button> 
</div> 

Jetzt erstellt eine neue Datei mit dem Namen: ‚my_component_styleded.component.html.scss-theme.scss‘ im Verzeichnis, und mit dem Folge Code verwenden, um die mixin für das Element Button personalisieren:

@import '~@angular/material/theming'; 
@mixin my_component_styleded-theme($theme) { 
    $primary: map-get($theme, primary); 
    $accent: map-get($theme, accent); 

    div { 
    button { 
     color: $accent; 
     &:hover, &:focus { 
      color: $primary; 
      border-left: 5px solid mat-color($accent); 
      } 
     } 
    } 
} 

Sie können andere Variablen mit Sass und anderen Dingen in Ihrem Kopf erklären.

Schließlich müssen Sie diese mixin im Haupt style.scss der App hinzufügen:

- style.scss -

@import '~@angular/material/theming'; 
@include mat-core(); 

// Custom component themes: 
@import 'app/components/my_component_styleded/my_component_styleded.component.scss-theme'; 
@mixin custom_component-theme($asis-light-theme) { 
    @include my_component_styleded-theme($asis-light-theme); 
} 

// Light Theme 
@include angular-material-theme($asis-light-theme); 
@include custom-component-theme($asis-light-theme); 

;)