Question

嘿，所以我正在尝试将一些自定义css应用到SproutCore中的ToolbarView。我已经设法通过将它保存在layouts / english.lproj中来获取CSSE文件，但我编写的样式被SproutCore提供的样式覆盖。这仅适用于框架提供的样式。在我的例子中，这将是background-image元素。如果我在Chrome的开发者工具（下面）中查看该页面，您可以看到这两种样式都已应用，但由于我的样式表在之后加载，因此会被覆盖。如果我取消选中Chrome中的background-image元素，则可以看到我的背景。

以下是我尝试过的事情：

为我的工具栏添加一个额外的CSS类并以其为目标（在我的案例中为AppToolbar）
定位每个CSS类，包括app-toolbar（.sc-view.sc-toolbar-view.AppToolbar）
CSS !important
大量谷歌搜索和阅读文档

还有其他人有这个问题吗？任何帮助/建议将不胜感激。

已发布截图 here

Answer 1

尝试使用background属性而不是background-image属性。

Answer 2

快速解决方案是为mainPane提供一个“myApp”的layerId，并在所有css属性前加上“#myApp”：

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

更清晰的解决方案是为您的应用提供一个主题：http://guides.sproutcore.com/theming_app.html。之后，您将必须使用$ theme：

为您的css类添加前缀

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

不要忘记你可以使用与Sproutcore集成的scss。通过这种方式，您可以封装所有规则：

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

这允许您只编写一次$ theme（每个文件），并且所有css规则将优先于SC提供的规则。

Sproutcore自定义CSS

2 个答案: