Sproutcore CSS personnalisé

Question

Hey, donc j'essaye d'appliquer un CSS personnalisé à un ToolbarView dans SproutCore. J'ai réussi à obtenir un fichier CSSE en le sauvegardant dans layout/english.lproj mais les styles que j'écris sont remplacés par ceux fournis par SproutCore. Cela arrive uniquement pour les styles fournis par le framework. Dans mon cas, ce serait l'élément background-image. Si je vois la page dans les outils de développement de Chrome (ci-dessous), vous pouvez voir que les deux styles sont appliqués, mais parce que ma feuille de style se charge ensuite, elle est surchargée. Si je désélectionne l'élément d'image d'arrière-plan dans Chrome, mon arrière-plan peut être vu.

Voici ce que j'ai essayé:

• Donner ma barre d'outils une classe CSS supplémentaire et ciblage (dans mon cas AppToolbar)
• Cibler toutes les classes CSS dont app-barre d'outils (.sc-view.sc-toolbar-view.AppToolbar)
• CSS !important
• Beaucoup de recherches sur Google et lecture Documentation

Est-ce que quelqu'un d'autre a eu ce problème? Toute aide/suggestion serait grandement appréciée.

Screenshot affichéhere

Answer 1

Essayez d'utiliser la propriété de fond au lieu de la propriété background-image.

Answer 2

Une solution rapide est de donner à votre mainPane une layerId de « myApp » et le préfixe toutes vos propriétés CSS avec « #myApp »:

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

Une solution plus propre est de donner à votre application un thème : http://guides.sproutcore.com/theming_app.html. Après cela, vous devrez préfixe votre classe CSS avec le thème de $:

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

N'oubliez pas que vous pouvez utiliser SCSS qui est à intégrer SproutCore. De cette façon, vous pouvez résumer toutes vos règles comme celle-ci:

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

Cela vous permettra d'écrire $ thème une seule fois (par fichier) et toutes vos règles CSS auront la priorité sur celui fourni par SC.