在 sapper 中更新身体背景颜色

Question

我想根据我所在的页面/路线更新正文背景颜色。到目前为止，我在这个：

//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 已经向 <svelte:body> 添加了一个 class: 指令来执行此类操作，所以可能稍后会更新。