Does Svelte facilitate dynamic CSS styling?

Question

In Svelte, how should classes be changed on elements depending upon component state?

For instance, you may wish to apply a class to a button under certain conditions, as in the following example.

<button class="{{class}}">

Right now, this can be achieved by creating a computed property which would return class names, or empty strings, under certain conditions.

However, I am concerned over whether this might be polluting the computed properties namespace. For instance, if there were a status, it might be desired to both set a dynamic text, like statusMessage, and a class, like statusClass.

Is there a better way to do this, or are computed properties the way to go? Is any more explicit support for CSS planned for Svelte?

Answer 1

Today you can use:

export let whitetext = false;
<div class:whitetext></div>

and then

<MyComponent whitetext={true} />

syntax for simple true/false based classes.

Answer 2

You can use an inline expression, like so:

<button class='{{active ? "active": "inactive"}}'>
  {{active ? 'Selected' : 'Select this'}}
</button>

That's generally better than using a computed property, because it's immediately clear what the possible values are just by looking at the template.

You can also use helper functions, if the expression would become unwieldy — in some situations you might prefer these to computed values:

<button class='{{getClass(status)}}'>{{getText(status)}}</button>

<script>
  export default {
    helpers: {
      getClass(status) {
        // ...
      },
      getText(status) {
        // ...
      }
    }
  };
</script>

Answer 3

There's no inbuilt way to do use, eg, conditionals {#if} inside class=, per other popular frameworks.

Since inline expressions will become unweildy as soon as you have more than two classes, I'd go stright to helpers in that case. Quick example of a class builder helper:

helpers: {
    getSlideClasses(index, currentIndex) {
        let classes = ['js_slide']
        if ( index === currentIndex ) {
            classes.push('selected')
        }
        if ( index === 0 ) {
            classes.push('first')
        }
        return classes.join(' ')
    }
}

And then:

<div class='{ getSlideClasses(index, currentIndex)}'>