Gridsome/vue.js 如何为不同的页面指定不同的背景颜色？

Question

如何在Gridsome/vue.js 中为不同的页面指定不同的背景颜色？我已经尝试确定 css 的范围，但它不适用于 body 或 html 选择器。

Answer 1

html 和 body 在应用程序范围之外。您将希望以编程方式控制这些元素。

我想到了两个简单的途径：

1. 使用 layouts 方法，无论有无作用域 CSS。
2. 使用 navigation guards 操作主体类列表。

Answer 2

你可以pass props to layouts。 例如传递一个像

这样的道具

<template>
  <Layout :background="white">
    <section>Add page content here</section>
  </Layout>
</template>

然后写下你的css喜欢

[background=white] section {
    background: #fff !important;
}