如何在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

回答