在 sapper 中更新主体背景颜色

Question

我想根据我的 page/route 更新正文背景颜色。到目前为止，我是这样的：

//index.svelte
:global(body) {
      background-color:white;
}

//about.svelte
:global(body) {
      background-color:blue;
}

当我从一页转到另一页时，颜色会发生变化，但是当我返回上一页时，它就不起作用了。有什么想法吗？？

Answer 1

您当前设置的问题在于，当您从 index 移动到 about 时，您基本上是在重置 body 上应该被视为全局样式的内容。

将样式应用于 body 的一个选项：您可以尝试将 <style> 元素添加到每个模板的 svelte:head 元素中。

像这样：

// index.svelte
<svelte:head>
  <style>
    body {
      background: white;
    }
  </style>
</svelte:head>

// about.svelte
<svelte:head>
  <style>
    body {
      background: blue;
    }
  </style>
</svelte:head>

已经有 some discussion 将 class: 指令添加到 <svelte:body> 来做这种事情，所以也许稍后会更新。

在 sapper 中更新主体背景颜色

Updating body background-color in sapper

svelte

sapper