Namensraum für angulare Materialstile

Question

Ich versuche, wiederverwendbare Komponenten mit Angular 1.4.3 und Angular-Material 1.0.5 zu erstellen. Idee ist, dass wir diese Komponenten in verschiedene Anwendungen integrieren können.

Aber das Problem, mit dem ich hier konfrontiert bin, ist, dass das Angular Material CSS bestimmte Stile auf generische Elemente wie html, Körper hat, wegen denen Stile der konsumierenden App überschrieben wird.

Um mehr Klarheit zu schaffen, betrachten Sie eine Beispielanwendung A, die eigene Stile für 'body', 'html', 'input' Tags hat. Diese Anwendung würde CSS und JS meiner benutzerdefinierten Komponente enthalten, um meine wiederverwendbare Komponente zu erhalten. Währenddessen verliert Anwendung A ihr eigenes Styling. Und ich kann ein '! Wichtig' auf den Stilen von Anwendung A nicht machen, weil ich sie nicht besitze.

Um dieses Problem zu beheben, habe ich versucht, eckige Materialstile als Teil meines grunt build-Prozesses zu benennen. Aber das hat das Problem nicht wirklich gelöst und die meisten meiner eckigen Materialrichtlinien scheinen nicht zu funktionieren.

Ich habe versucht, eckige Material Github Probleme zu überprüfen, aber ich sehe keine geeignete Lösung dafür.

https://github.com/angular/material/issues/6369

https://github.com/angular/material/issues/469

Gibt es eine Möglichkeit Winkel Material Stile richtig Namespace? Bitte helfen Sie.

Answer 1

Nicht ganz sicher, ob ich das richtig verstanden habe, aber die Verwendung von !important auf Ihrem eigenen Stil sollte die von Ng Material gesetzten überschreiben.

eines der Beispiele nehmen Sie

input { 
    font-family: Tahoma !important; 
} 

zu

verknüpft Aber denken Sie daran !important nur wirklich notwendig, wenn zu verwenden. Wie in diesem Fall, wenn Sie die Stile, die Sie überschreiben müssen, nicht steuern können.