Warum setzt Angular Material Hintergrundfarben?

Question

Ich habe gerade angefangen mit Angular Material (ich bin Bootstrap gewohnt) und bemerke einige seltsame Dinge. Ich bin die Bibliothek für die md-datepicker verwenden, aber wenn ich es auf meiner Seite platziert Ich bemerkte sie den Picker, um eine Hintergrundfarbe wurde Einstellung:

md-datepicker.md-default-theme, md-datepicker { 
    background: rgb(255,255,255); 
} 

Aber mein Hintergrund für meine Website ist eine blaue Farbe, so dass es Es ist nur eine weiße Box, die über dem Datumsfenster schwebt und schrecklich aussieht. Warum würden sie überhaupt diesen Wert festlegen? Warum lassen Sie es nicht transparent, damit es mit jeder Seite und jeder Hintergrundfarbe verwendet werden kann?

Dies scheint nur mein Leben härter zu machen, weil ich jetzt diese Stile in meinem CSS überschreiben muss.

Kann jemand bitte erklären, warum Google dies tun würde?

Answer 1

Ich schreibe eine Bibliothek, die alle erdenklichen Designanforderungen befriedigt. Ich glaube, das ist eine sehr große Aufgabe.

Das macht das Web so erstaunlich, alles ist Open-Source und Sie können es so oft hacken, wie Sie möchten, bis es genau so aussieht, wie Sie es wollen.

Aber Sie müssen nicht ein Hardcore-Quellcode-Digger sein, um zu ändern, was Sie brauchen, deshalb kommt die Angular-Materialbibliothek mit einer .scss-Datei (Sass Mixin), die für Sie in die CSS-Bibliotheken kompiliert.

Wenn Sie Winkel Material mit Bower bekam dort eine Winkel material.scss Datei, die Sie bearbeiten können, und kann dann neu kompilieren, die Zeilennummer, die Sie suchen, ist um 2615:

// Floating pane that contains the calendar at the bottom of the input. 
.md-datepicker-calendar-pane { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: $z-index-menu; 

    border-width: 1px; 
    border-style: solid; 
    background: transparent; 

    transform: scale(0); 
    transform-origin: 0 0; 
    transition: transform $md-datepicker-open-animation-duration $swift-ease-out-timing-function; 

    &.md-pane-open { 
    transform: scale(1); 
    } 
} 

Answer 2

Die Antwort auf warum ist, weil Angular Material auf Material Design basiert, die sehr spezifische Farbrichtlinien in Angular Material über das Konzept der Themen implementiert hat. Um Ihre Hintergrundfarbe zu steuern, können Sie CSS verwenden und Sie können auch Ihr Design konfigurieren. Dieses Thema enthält Details zur Verwendung von Themen: https://material.angularjs.org/latest/Theming/03_configuring_a_theme.