无法为 Framework7 + Vue App 设置主体背景颜色

Question

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

来设置背景颜色

body {
 background-color: red;
}

我的 App.vue 文件里面。

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

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

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

F7+Vue 应用设置背景色有可靠的方法吗？

Answer 1

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

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

</style>

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

Answer 2

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

和css

.bg.page {
  background-color: red;

}