Meine eigenen Stile in eckigem Material ui

Question

Material-UI und ich möchte es anpassen. Leider werden meine eigenen Stile von den Framework-Stilen überschrieben. Zum Beispiel, wenn ich erklären Stile für md-Symbolleiste

md-toolbar { 
    background: red; 
} 

diese Erklärung von Material überschrieben wird. Ich fügte hinzu !important Direktive und es half, aber ich will es nicht überall verwenden. Wie sollte ich Material angemessen anpassen?

Answer 1

Sie anderes Thema ist auf ihre Themenseite anwenden können direkt auf Komponenten wie gesehen: https://material.angularjs.org/#/Theming/04_multiple_themes

Und wenn keiner der in Thema integrierten anwenden, können Sie Ihre eigene Rolle kann: https://material.angularjs.org/#/Theming/03_configuring_a_theme

Und wenn Sie brauchen Anpassungen wie padding oder margin, dann aktualisieren die scss Datei selbst einen benutzerdefinierten Build erhalten: https://material.angularjs.org/#/Theming/01_introduction

Wenn Sie Stile außer Kraft setzen wollen zu, gelten nicht den Stil direkt an den md- Richtlinie, sondern graben sich in das Element, das in der Richtlinie und Art ein Kind erstellt:

md-toolbar > h2 { 
    background: red; 
} 

Answer 2

beste Methode, die ich kenne, ohne recompilling weniger, sass, etc .:

Sie sollten benutzerdefinierte Design anwenden:

angular.module('myApp').config(['$mdThemingProvider', function($mdThemingProvider) { 
    $mdThemingProvider.theme('myAwesome') 
     .primaryPalette('blue') 
     .accentPalette('cyan') 
     .warnPalette('red'); 
    $mdThemingProvider.setDefaultTheme('myAwesome'); 
}]); 

Nach dass Elemente erhalten Klasse: md-myAwesome-theme so können Sie Stil in Ihrem CSS hinzufügen (oder weniger) Datei:

md-select.md-myAwesome-theme { 
    margin: 0; 
    padding: 0; 
} 

Answer 3

Ich habe herausgefunden, wie Sie die Symbolleiste transparent machen können. Sie wickeln Ihre Symbolleiste in ein Div und geben Sie einen Klassennamen. Dann greifen Sie in Ihrem CSS über den Klassennamen, den Sie in das Wrapping-Div gesetzt haben, auf Ihre Symbolleiste zu. hier ein Ausschnitt meines Codes.

Das ist mein HTML

<section id="learn" class="navbar"> 
<md-toolbar layout="row" layout-align="space-between center"> 
    <span> 
     <h3 class="md-toolbar-tools">Something</h3> 
    </span> 

Diese

mein css ist

.navbar md-toolbar { 
background-color: transparent; 
} 

Hope this Hilfe!

Answer 4

Ich hatte damit zu kämpfen, da ich nicht eine ganze neue pallate erstellen wollte und nur ein Mock up für ein neues Stück des Layouts machen wollte. Ich habe CSS-Inline-Styling wie dieses verwendet und es hat funktioniert!

<md-toolbar style="background:indigo" layout="row" layout-align="space-between center"> 
... 
</md-toolbar> 

Answer 5

Sie können auch Angular Material Themen deaktivieren:

angular.module('myApp', ['ngMaterial']) 
    .config(function($mdThemingProvider) { 
     $mdThemingProvider.disableTheming(); 
    }); 

Answer 6

Zwingende UI-Designs wie ein Schmerz sein kann. Mit Angular Material habe ich herausgefunden, dass das Erstellen einer separaten CSS-Datei, oft override-material-ui genannt, und die Verwendung von ID-Selektoren zum Ändern der Stile anstelle von Klassennamen ziemlich gut funktioniert.Also für Ihren Code, wäre es:

#override-toolbar { 
    background: red; 
} 

Und der Tag in dem HTML-Code aussehen würde:

<md-toolbar id="override-toolbar"> 
</md-toolbar> 

Offensichtlich ist der Symbolleisten-Tag wahrscheinlich in es hat mehr los wäre, aber für die Übersteuerung Stile Ich finde, dass dies am besten funktioniert. Es ist schön, wenn Sie mehrere Tags auf dieselbe Weise formatieren müssen. Obwohl Inline effektiv alles außer Kraft setzt, kann es lästig sein, Stile später zu ändern.

Wenn aber auch ein ID-Selektor es nicht schneidet und Sie nicht mit benutzerdefinierten Designs arbeiten möchten, wählen Sie den Inline-Style-Selektor.

Hoffe, das hilft!