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

Question

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

Answer 1

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

想到两个简单的途径：

1. 使用可以使用或不使用范围 CSS的布局方法。
2. 使用导航守卫操作主体 classList 。

Answer 2

您可以将 props 传递给 layouts。例如传递一个像

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

然后写你的CSS

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