Svelte Material UIのコンポーネントに独自CSSクラスを適用させる

はじめに

最近Svelteが気になっていて、ポートフォリオサイトをSvelteを使って書き直している。

そこでSvelte Materil UIを利用した際に、一部のコンポーネントのみに独自CSSクラスを使ってスタイルを当てたい場面があったのでメモしておく。

方法

例えばButtonコンポーネントに独自のスタイルを当てたい場合、次のようにButtonコンポーネントにクラスを指定して:global()を使用してスタイルを適用する。

<Button class="my-button" variant="raised">
  <Label>HOGE</Label>
</Button>

<style>
  * :global(.my-button) {
    background-color: red;
  }
</style>

:global()を使わず直接.my-buttonクラスに対してスタイルを当てようとしても、Svelteによって子コンポーネントへのスタイル適用がブロックされてしまうためスタイルの適用はできない。

参考

• :global()使い方
  • https://svelte.dev/docs#component-format-style
• 参考にしたイシュー
  • https://github.com/hperrin/svelte-material-ui/issues/516
• Svelte Material UI
  • https://sveltematerialui.com/