'How to change background color through component of svelte

My program look like this

<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}

I have set CSS of first page (Login.svelte)

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

and after I log in I want to change the background color on Menu page I try to use background properties on tag <body> in <style> on Menu.svelte but it seems didn't work, it only change background color of menu button not the entire page.

csssveltesvelte-component


Solution 1:[1]

To achieve that sort of cross-component communication without overriding styles, I would recommend using a store as such

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

export const background = writeable('white');

Then using that store to drive a dynamic style

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

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

This store can then by updated from anywhere and will change the background color.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BlueFrog

Related Questions