Date 2022-06-25

SvelteComponent に class を渡す

※ この記事を書いてから1年以上経ってるかも

  tech ,  svelte

$$props.class を利用する。

  • MyComponent.svelte
<!-- MyComponent.svelte -->
<div class={$$props.class}>
  <p>Component contents</p>
</div>
  • App.svelte
<script>
  import MyComponent from "./MyComponent.svelte";
</script>

<MyComponent class="md-3" />

スタイルの影響範囲は SvelteComponent で閉じているため、

  • グローバルスコープのクラス
  • コンポーネント側で定義しているクラス

を指定しないと効果がないことに注意。

CSS Framework を使ってるときに便利!