Svelte中如何为单页面单独设置body样式，避免全局生效？

因为:global(body)会直接作用于全局的body元素，要实现页面级的差异化样式，核心思路是给body添加页面唯一标识来限定样式范围，或是动态修改CSS变量。以下是几种实用的实现方式：

方法一：页面组件挂载/销毁时动态操作body类名 #

在需要自定义body样式的页面组件中，通过生命周期钩子控制body的类名，确保样式仅在当前页面生效：

<!-- PageA.svelte -->
<script>
  import { onMount, onDestroy } from 'svelte';

  // 定义当前页面的唯一类名
  const pageBodyClass = 'page-a-body';

  onMount(() => {
    // 页面挂载时给body添加类名
    document.body.classList.add(pageBodyClass);
  });

  onDestroy(() => {
    // 页面销毁时移除类名，避免影响其他页面
    document.body.classList.remove(pageBodyClass);
  });
</script>

<style>
  // 通过类名限定全局body样式的作用范围
  :global(body.page-a-body) {
    background-color: #f0f9ff;
    color: #0c4a6e;
    padding: 1rem;
  }
</style>

方法二：基于SvelteKit的全局Layout统一管理body类名 #

如果使用SvelteKit，可以通过页面的load函数传递类名，在根Layout中统一处理类名切换：

1. 在目标页面的+page.js/+page.server.js中返回body类名：

// src/routes/page-b/+page.js
export function load() {
  return {
    bodyClass: 'page-b-body'
  };
}

2. 在根Layout中处理类名的添加与切换：

<!-- src/routes/+layout.svelte -->
<script>
  export let data;
  import { onMount, onDestroy } from 'svelte';

  let currentBodyClass = '';

  onMount(() => {
    if (data.bodyClass) {
      currentBodyClass = data.bodyClass;
      document.body.classList.add(currentBodyClass);
    }
  });

  onDestroy(() => {
    if (currentBodyClass) {
      document.body.classList.remove(currentBodyClass);
    }
  });

  // 页面切换时更新类名（响应data的变化）
  $: if (data.bodyClass && currentBodyClass !== data.bodyClass) {
    document.body.classList.remove(currentBodyClass);
    currentBodyClass = data.bodyClass;
    document.body.classList.add(currentBodyClass);
  }
</script>

<style>
  :global(body.page-b-body) {
    background-color: #fffbeb;
    color: #92400e;
  }
</style>

方法三：动态修改全局CSS变量 #

先在全局样式中用CSS变量定义body的基础样式，再在不同页面中动态修改变量值：

1. 在全局样式文件（比如app.css）中定义变量：

body {
  background-color: var(--body-bg, #ffffff);
  color: var(--body-text, #333333);
  transition: background-color 0.3s, color 0.3s;
}

2. 在页面组件中修改变量并在销毁时恢复：

<!-- PageC.svelte -->
<script>
  import { onMount, onDestroy } from 'svelte';

  // 保存原始变量值，用于页面销毁时恢复
  let originalBg;
  let originalText;

  onMount(() => {
    originalBg = getComputedStyle(document.body).getPropertyValue('--body-bg');
    originalText = getComputedStyle(document.body).getPropertyValue('--body-text');
    
    // 设置当前页面的变量值
    document.body.style.setProperty('--body-bg', '#fef2f2');
    document.body.style.setProperty('--body-text', '#991b1b');
  });

  onDestroy(() => {
    // 恢复原始变量值
    document.body.style.setProperty('--body-bg', originalBg);
    document.body.style.setProperty('--body-text', originalText);
  });
</script>

以上三种方法都能避免:global(body)的全局污染，确保不同页面的body样式独立生效。

内容的提问来源于stack exchange，提问作者zaka