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

Question

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

Answer 1

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

想到两个简单的途径：

1. 使用layouts方法，无论有无CSS范围，都可以使用。
2. 使用navigation guards操作正文classList。

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;
}