如何通过svelte的组件改变背景颜色

Question

我的程序是这样的

<script>
    import { islogin, mode } from './stores.js';
    import Login from './Login.svelte';
    import Logout from './Logout.svelte';
    import Menu from './Menu.svelte';
    import Deposit from './Deposit.svelte';
    import Withdraw from './Withdraw.svelte';
    import CheckBalance from './CheckBalance.svelte';
  </script>
  
  {#if !$islogin }
    <Login />
  {:else}
      {#if $mode == 'menu'}
        <Menu />
      {:else if $mode == 'deposit'}
        <Deposit />
      {:else if $mode == 'withdraw'}
        <Withdraw />
      {:else if $mode == 'balance'}
        <CheckBalance />
      {/if}
    <Logout />
  {/if}

我设置了第一页的 CSS (Login.svelte)

<style>
    :global(body) {
      background: red;
    }
  </style>

登录后，我想更改菜单页面上的背景颜色我尝试在 <style> 和 Menu.svelte 中的标签 <body> 上使用背景属性，但似乎没有'不起作用，它只改变菜单按钮的背景颜色，而不是整个页面。

Answer 1

要在不覆盖样式的情况下实现那种 cross-component 通信，我建议使用这样的商店

// store.js
import { writeable } from 'svelte/store';

export const background = writeable('white');

然后使用该商店来驱动 dynamic style

<script>
    import { background } from 'store';
</script>

<div style:background-color={$background}>
    <!-- content -->
</div>

此商店随后可以从任何地方更新，并且会更改背景颜色。

如何通过svelte的组件改变背景颜色

How to change background color through component of svelte

css

svelte

svelte-component