无法在Framework7 + Vue App的正文上设置背景颜色

Question

出于某种原因，我无法通过简单的

设置背景颜色

body {
 background-color: red;
}

关闭我的App.vue文件。

我可以使用页面内容更改背景颜色：

.page-content {
 background-color: red;
}

但这是一个糟糕的黑客，因为它也会弄乱我的面板和其他组件。

是否有可靠的方法为F7 + Vue应用设置背景颜色？

Answer 1

将您的页面元素的类名设置为<f7-page class="bg" ..

和css

.bg.page {
  background-color: red;

}

Answer 2

这取决于您创建应用程序的方式，如果您想要更改单个页面而不想更改其他页面，那么您可能正在使用组件或将它们放在单独的文件中，无论哪种方式，您都可以使用范围样式括号来指定一些css仅适用于特定组件

<style scoped>
    your css here...
    probably...
   .page-content{
    background-color:red;
    }

</style>

另一个好主意是当你创建一个新页面时给它一个id，这样你就可以使用上面更简单的方法（范围样式）更容易地定义样式而没有一些意外的行为然后你只需使用这个特定内容的样式 #yourID