Sproutcore 自定义 CSS答案

【问题标题】：Sproutcore Custom CSSSproutcore 自定义 CSS
【发布时间】：2010-11-26 00:39:54
【问题描述】：

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

以下是我尝试过的事情：

给我的工具栏一个额外的 CSS 类并定位它（在我的例子中是 AppToolbar）
定位每个 CSS 类，包括 app-toolbar (.sc-view.sc-toolbar-view.AppToolbar)
CSS !important
大量谷歌搜索和阅读文档

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

截图发布 here

【问题讨论】：

标签： javascript sproutcore

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

一个更简洁的解决方案是给你的应用一个主题：http://guides.sproutcore.com/theming_app.html。之后，你必须在你的 CSS 类前面加上 $theme:

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

不要忘记您可以使用与 Sproutcore 集成的 scss。这样您就可以像这样封装所有规则：

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

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

【讨论】：