How to pass CSS class name to Svelte component from parent

We have parent component called App, which imports and renders ChildComponent.

// App.svelte
<script>
  import ChildComponent from './ChildComponent.svelte';
</script>
 
<ChildComponent text="foo" />

// ChildComponent.svelte
<script>
  export let text = "";
</script>
 
<p>{text}</p>

We want to pass an optional CSS class to ChildComponent.

// App.svelte
<ChildComponent text="foo" class="text-tomato" />

As expected, we cannot declare the class prop because it's a reserved keyword in JavaScript.

// ChildComponent.svelte
<script>
  export let text = "";
  
  export let class = ""; // ❌ does not work
</script>

But while React/JSX has className, Svelte does not have its equivalent.

Workaround 1 - restProps

As the name suggests, $$restProps gives us props not declared with export (see docs). Use it to get the class attribute and style it in ChildComponent.

// App.svelte
<ChildComponent text="foo" class="text-tomato" />

// ChildComponent.svelte
<script>
  export let text = "";
  
  const className = $$restProps.class || "";
</script>
 
<p class={className}>{text}</p>
 
<style>
  .text-tomato { color: tomato; }
</style>

Workaround 2 - renamed export

Kinda cursed IMO 💀

Same rest of code as above, but instead of this:

- const className = $$restProps.class || "";

We use this in ChildComponent:

+ let className = "";
+ export { className as class };

Beyond this note

The class name (.text-tomato) in this example is automatically detected and scoped by Svelte in the child component. But if you want to pass a custom generated CSS class name to the component, eg. from CSS module, you need to use a preprocessor setup.

You can find more workarounds—and the entire 100+ comments discussion on passing CSS class to components—in this issue: https://github.com/sveltejs/svelte/issues/2870

In: Web frameworks MOC