Onsen UIでネイティブDOM要素をスタイルする方法は？

Question

Onsen UIのデフォルトスタイルを上書きする際に問題があります。

これは、ネイティブセレクタがより高い特異性を有するためです。私は

h1 { color: red; } 

を持っている場合、これは長い間、tediusのCSSセレクタを書くために私をリードネイティブ

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

...によってかき消されます。

温泉の成分（すなわち、<ons-*を開始する要素）では、修飾子を使用してカスタムスタイルを設定できます。

しかし、ネイティブエレメントはどうですか？

ドキュメントがCSSNextに言及していないので、私は思った、！、私はいくつかのネストを使用します素晴らしい：

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

...しかし、何のサイコロ。 Onsenは独自のコンポーネントにCSSNextを使用していますが、独自のカスタムCSSシートは使用していません。

どのような考えですか？

Answer 1

自分のスタイルを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; 
} 

そしてMODIとしてそれを使用しますfier：

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

これは私にとってはうまくいきました。これはあなたに良いアイデアを与えることを願っています。 ons要素のコンパイルについての詳細は、docs