Javascript Sproutcore自定义CSS

嘿，我正在尝试将一些自定义css应用到SproutCore中的工具栏视图。通过将CSSE文件保存在layouts/english.lproj中，我成功加载了CSSE文件，但我编写的样式被SproutCore提供的样式覆盖。这仅适用于框架提供的样式。在我的例子中，这将是背景图像元素。如果我在Chrome的开发者工具（如下）中查看页面，您可以看到这两种样式都被应用，但由于我的样式表在加载之后被覆盖。如果我取消选中Chrome中的背景图像元素，可以看到我的背景

以下是我尝试过的一些事情：

• 给我的工具栏一个额外的CSS类，并以此为目标（在我的例子中是AppToolbar）
• 针对每个CSS类，包括应用程序工具栏（

  .sc view.sc toolbar view.AppToolbar

  ）
• CSS

  ！重要信息

• 大量的谷歌搜索和阅读文档

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

---

发布的屏幕截图

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

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

一个快速解决方案是在主窗格中去掉“myApp”，并在所有css属性前面加上“#myApp”：

一个更简洁的解决方案是为应用程序提供一个主题：。 之后，您必须在css类前面加上$theme：

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

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

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

---

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

一个快速解决方案是将主窗格中的图层去掉“myApp”，并在所有css属性前面加上“#myApp”：

一个更简洁的解决方案是为应用程序提供一个主题：。 之后，您必须在css类前面加上$theme：

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

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

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

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