如何在Onsen UI中设置原生DOM元素？

我在覆盖Onsen UI中的默认样式时遇到了问题。如何在Onsen UI中设置原生DOM元素？

这是因为本地选择器具有更高的特异性，例如，如果我有

h1 { color: red; }

这是由本地

.page h1 { color: green; } /* dummy example */

...这使我写长，tedius CSS选择淹没。

使用温泉组件（即元素开始<ons-*），您可以使用修改器来设置自定义样式。

但是本地元素呢？

的文档提到CSSNext，所以我想，伟大的！我只是用一些嵌套：

.something { 
    & h1 { color: red; } 
}

...但没有骰子。看起来，尽管Onsen使用CSSNext作为自己的组件，但它不会通过它运行自己的自定义CSS工作表。

有什么想法？

2017-07-29 Utkanos

我能够通过在onsenui.css文件的底部附加我自己的样式来做一些更改。

例如，

要更改插件，网页，其中有一个id =“登陆”的背景颜色，我设置：

#login .page__background { 
    background-color: #cfebdc; 
}

要创建一个标志类：

.home-logo { 
    display: block; 
    margin: 10% auto; 
    width: 60%; 
}

此外，还可以“创造”自己的修饰符像这样（附加到温泉，CSS-components.css文件）：

.text-input--mymod { 
    text-align: center; 
    color: #00ff00; 
}

而且使用它作为一个作案fier：

<ons-input modifier="mymod" type="password" placeholder="Your password"></ons-input>

这对我很好。希望这给你一个更好的主意。你可以在docs

上阅读更多关于ons元素的汇编

2017-10-10 21:22:14

回答