2016-05-17 108 views
0

我剛開始使用Angular Material(我習慣Bootstrap)並且注意到一些奇怪的東西。我使用的庫爲md-datepicker,但是,當我把它放在我的網頁上,我注意到他們在設置背景顏色的選擇器:爲什麼角度材質會設置背景顏色?

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

但我爲我的網站背景爲藍色,所以有隻是漂浮在日期選擇器頂部的白色盒子,看起來很糟糕。爲什麼他們甚至會首先設置這個值?爲什麼不讓它透明,以便它可以用於任何網站和任何背景顏色?

這似乎使我的生活更加艱難,因爲現在我必須在我的CSS中覆蓋這些樣式。

有人可以解釋爲什麼谷歌會這樣做嗎?

回答

3

寫一個圖書館,安撫每一個可以想象的設計要求我認爲是一個非常高的秩序。

這就是讓網絡如此驚人的原因,一切都是開源的,你可以儘可能多地破解它,直到它看起來完全符合你的需求。

但是,您不一定要成爲一名核心源代碼挖掘者來改變您的需求,這就是爲什麼Angular-material庫帶有一個爲您編譯爲css庫的.scss文件(Sass mixin)的原因。

如果你有角的材料與涼亭有,您可以編輯,然後可以重新編譯一個角material.scss文件,你要找的行數大約是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); 
    } 
} 
2

的回答爲什麼是因爲Angular Material是基於材料設計的,該材料設計通過主題概念在角度材料中實現了非常具體的顏色指南。要控制背景顏色,你可以使用CSS,你也可以配置你的主題。本主題詳細介紹了使用主題:https://material.angularjs.org/latest/Theming/03_configuring_a_theme