SproutcoreカスタムCSS

Question

SproutCoreのツールバービューにカスタムCSSを適用しようとしています。私はCSSEファイルをレイアウト/ english.lprojに保存して読み込むことに成功しましたが、私が書いたスタイルはSproutCoreが提供するものによって上書きされています。これは、フレームワークによって提供されるスタイルでのみ発生します。私の場合、これは背景画像要素になります。 Chromeのデベロッパーツール（下）のページを見ると、両方のスタイルが適用されていることがわかりますが、後でスタイルシートが読み込まれるため、オーバーライドされています。 Chromeでbackground-image要素のチェックを外すと、背景が見えます。

• 私のツールバーに余分なCSSクラスを与え、
アプリ-ツールバーを含むすべてのCSSクラスをターゲットに（私の場合はAppToolbar）
• （.sc-view.sc-toolbar-view.AppToolbar）というをターゲット：ここ

  は、私が試してみました事があります

• CSS !important
• グーグルの宅地読むドキュメンテーション

誰にもこの問題がありましたか？どんな助力/提案も非常に高く評価されるでしょう。

スクリーンショットではなく、背景画像のプロパティのbackgroundプロパティを使用してみてくださいhere

Answer 1

を掲載しました。

Answer 2

迅速な解決策は、「#myApp」で、すべてのCSSプロパティをあなたのmainPane「て、myApp」のlayerIdを与えるとプレフィックスすることです：

#myApp.sc-toolbar-view { ... } 

クリーナーソリューションは、あなたのアプリのテーマに与えることです：http://guides.sproutcore.com/theming_app.html。 その後、あなたは$をテーマにしたあなたのCSSクラスを接頭辞する必要があります：

$theme.sc-toolbar-view { ... } 

あなたはSproutcoreに統合されSCSSを使用できることを忘れないでください。これは、このようなすべてのルールをカプセル化することができる方法：

$theme { 
    .sc-toolbar-view { ... } 
    .button { ... } 
    ... 
} 

これは、あなたが一度だけ（ファイルあたり）$テーマを書くことができますし、すべてのCSSルールは、SCが提供するものよりも優先されます。