更新 sapper 中的主体背景颜色

Question

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

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

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

当我从一页转到另一页时，颜色会发生变化，但是当我返回上一页时，颜色不起作用。任何想法 ？？

Answer 1

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

将样式应用到 的一种选择是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>

已经有一些关于添加class:指令来<svelte:body>执行此类操作的讨论，所以也许稍后会更新。