Sproutcore 自定义 CSS

Question

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

以下是我尝试过的事情：

• 为我的工具栏提供一个额外的 CSS 类，并以该类为目标（在我的例子中为 AppToolbar）
• 以每个 CSS 类为目标，包括 app-toolbar (.sc-view.sc-toolbar-view.AppToolbar< /code>)
• CSS !important
• 大量谷歌搜索和阅读文档

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

已发布屏幕截图

Answer 1

尝试使用背景属性而不是背景图像属性。

Answer 2

一个快速的解决方案是为您的 mainPane 指定一个名为“myApp”的 LayerId，并在所有 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 提供的规则。