Svelte Body

Currently in Svelte Kit and Routify, applying styles per page to the body doesn't work. You can't use :global(body) since the style tags aren't removed and reapplied on route change. svelte-body handles that for you. It's available as an action or component.

Install

``bash
npm i svelte-body -D
`

This library is made for Svelte 5, if you'd like to use Svelte 3/4 checkout v1.

Usage

Just like in regular html you can apply classes with class="" and styles with style="".

`svelte



`

Alternativley you can use a style object like so:

`svelte



`

We use clsx under the hood, which allows you to pass different shapes and only have truthy names applied as classes. Read me about it on their docs.

`svelte






`

Actions

We also provide a classList and style action, which can be used on (or any other element).

- classList

`svelte






`

- style

`svelte



`

It can also take an object:

`svelte


use:style={{ backgroundColor: 'blue', '--cool-css-prop': '😎' }} />
``

Migrating from v1 to v2

- Svelte 5 is now required
- We updated to clsx v2

Read the full changelog.

Support

- Join the discord

- Create a issue on the github