Question

我无法覆盖Onsen UI中的默认样式。

这是因为天然选择子具有更高的特异性，例如如果我有

h1 { color: red; }

这被本机

淹没了

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

...这导致我编写长，tedius CSS选择器。

使用Onsen组件（即以<ons-*开头的元素），您可以使用修饰符来设置自定义样式。

但是原生元素呢？

文档提到CSSNext，所以我想，太棒了！我只是使用一些嵌套：

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

......但没有骰子。看来，虽然Onsen使用CSSNext作为自己的组件，但它并没有通过它运行你自己的自定义CSS表。

有什么想法吗？

Answer 1

我可以通过在onsenui.css文件的底部附加我自己的样式来进行一些更改。

例如

要更改具有id =“login”的ons页面的背景颜色，我将其设置为：

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

创建徽标类：

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

此外，您可以像这样“创建”自己的修饰符（附加到onsen-css-components.css文件）：

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

并将其用作修饰符：

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

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

上阅读有关ons元素编译的更多信息