如何定製Auth0鎖定控件的樣式？

Question

我正在嘗試設置Auth0鎖定控件的樣式，但是我的樣式未應用。

根據文檔，我應該能夠設置該控件的樣式來匹配我的網站，Lock: Customize the look and feel。

前置在自定義CSS的前體鍵，以便在CSS規範贏得

我加入這行我不太樣式表。

body #a0-lock.a0-theme-default .a0-panel { 
    font-family: 'Open Sans', sans-serif; 
} 

但是我的風格不適用，當我在Firefox中調試樣式表時，我可以看到我的代碼丟失了選擇。

我怎樣才能贏得樣式選擇？我如何設計Auth0鎖定控件？

如果它的重要我運行一個ASP.Net MVC網站，我的少轉換爲CSS。我正在使用Auth0鎖定版本8.2。

Answer 1

我能夠使用一個更具體的選擇器來解決。在我的問題，我錯過了全選（*）

所以; body #a0-lock.a0-theme-default .a0-panel成爲; body #a0-lock.a0-theme-default .a0-panel *

我發現獲取完整選擇器的最簡單方法是調試正在運行的應用程序的樣式。

Answer 2

確保您的css順序也被正確定義。據order of css definition docs

Auth0鎖插入它在HTML文檔 的頭節點CSS定義，它這樣做在最後。因此，爲了覆蓋 鎖的主體風格，你必須爲Auth0鎖定包含標籤定義後立即插入你的CSS體內節點， ：

這爲我工作

<script src="http://cdn.auth0.com/js/lock-7.min.js"></script> 
<link rel="stylesheet" href="custom.css"/> 

然後在我的css

body #a0-lock.a0-theme-default .a0-panel { 
    background-color: greenyellow; 
} 

若要更改各個元素的font-family使用更具體的選擇器。例如。改變鎖頭使用的字體家庭以下

body #a0-lock.a0-theme-default .a0-header h1 { 
    font-family: 'Open Sans' !important; 
} 

改變所有面板元件字體家庭使用*像下面

body #a0-lock.a0-theme-default .a0-panel * { 
    font-family: 'Open Sans' !important; 
}