Svelte Action Recipes¶

Dynamic CSS in Svelte style tags¶

In Svelte it is not currently possible to use variables in the <style> tags. This is a workaround to enable that using an action. It is simple and uses css custom properties (thus it is not something that is supported in Internet Explorer).

This is a very short and succint action that is just a couple of lines of code. Let's take a look:

export function styles(node, styles) {
  setCustomProperties(node, styles);

  return {
    update(styles) {
      setCustomProperties(node, styles);
    },
  };
}

function setCustomProperties(node, styles) {
  Object.entries(styles).forEach(([key, value]) => {
    node.style.setProperty(`--${key}`, value);
  });
}

You pass in an object that contains your custom styles and it will create custom properties that are applied to the element in question. Here's how you would apply it to an element:

<script>
    import { styles } from './styles.js'
    export let color = "pink";
</script>

<style>
    h1 {
        color: var(--color);
    }
</style>

<h1 use:styles={{ color: color }}>
    Child color is {color}
</h1>

This gets cascaded down to grand-children and even further down in the tree, which might or might not be what you want. It is, after all, just CSS. Keep this in mind if you want to use this method.

Applying a color from the parent is as simple as exposing it and use a regular old prop: <Child color="blue" />. Here's a REPL to play around with.

Inspired by kaisermann's svelte-css-vars

Recipe maintainer Svelte School and @kevmodrome

Creating Custom Scroll Actions with Svelte¶

to be written

Back to Table of Contents