如何自定义Auth0锁控件的样式？

Question

我正在尝试设置 Auth0 锁定控件的样式，但是我的样式没有被应用。

根据文档，我应该能够设置此控件的样式以匹配我的网站，Lock: Customize the look and feel。

Prepend a body key in front of the customization CSS in order to win in CSS specification

我已将此行添加到我的 Less 样式中 sheet。

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

但是我的样式没有应用，当我在 Firefox 中调试样式 sheet 时，我可以看到我的代码正在丢失选择。

如何赢得款式选择？如何设置 Auth0 锁定控件的样式？

如果它很重要，我是运行一个 ASP.Net MVC 网站，我的 Less 被转换为 CSS。我正在使用 Auth0 锁的 8.2 版。

Answer 1

确保您的 css 顺序也被正确定义。根据order of css definition docs

Auth0 Lock inserts it's CSS definitions in the head node of the HTML Document and it does this at the very end. So, in order to override the Lock's main styles you must insert your CSS in the body node, right after the tag definition for the Auth0 Lock inclusion:

这对我有用

<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;
}

要更改单个元素的字体系列，请使用更具体的选择器。例如。要更改锁头的字体系列，请使用以下

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;
}

Answer 2

我能够使用更具体的选择器解决问题。在我的问题中，我错过了完整的选择器 (*)

所以； body #a0-lock.a0-theme-default .a0-panel 变成了； body #a0-lock.a0-theme-default .a0-panel *

我发现获取完整选择器的最简单方法是在运行应用程序上调试样式。

如何自定义Auth0锁控件的样式？

How do I customise the style of the Auth0 lock control?

css

less

auth0