Svelteで子コンポーネントのスタイルを親コンポーネントから変更する

Kenta Yoshihara

Published in

nextbeat-engineering

6 min readFeb 8, 2024

はじめに

こんにちは、ネクストビートでエンジニアをしている吉原です。子育て情報メディア「KIDSNA STYLE」の開発に携わっています。

「KIDSNA STYLE」はフレームワークとしてSvelteを採用しています。業務を進める上で子コンポーネントのスタイルを親コンポーネントから変更する必要が生じました。

ウェブ検索を行っていたのですが、意外にまとまったページが存在しなかったため、公式情報を元にその方法をまとめました。

なお、本ブログ記事は以下のREPLを参考にしています。

・Passing classes or styles to component children

・Passing classes to child components

ベースとなるコンポーネント

以下のコンポーネントを元に子コンポーネントのスタイルを親コンポーネントから変更する方法を示します。

<!-- Card.svelte -->
<div class="card">
 Svelte
</div>

<style>
 .card {
  border: 1px solid black;
  border-radius: 5px;
  background-color: lightblue;
  padding: 1rem;
 }
</style>

<!-- App.svelte -->
<script>
  import Card from "./Card.svelte";
</script>

<div class="box">
  <Card />
</div>

子コンポーネントのスタイルを親コンポーネントから変更する

カードの背景色を親コンポーネントから変更します。

コードを以下に示します。

<!-- Card.svelte -->
<div class="card {$$restProps.class ?? ''}">
 Svelte
</div>

<style>
 .card {
    border: 1px solid black;
    border-radius: 5px;
    background-color: lightblue;
    padding: 1rem;
 }
</style>

<!-- App.svelte -->
<script>
  import Card from "./Card.svelte";
</script>

<div class="box">
  <Card class="pink-card" />
</div>
<style>
 .box :global(.pink-card) {
    background-color: pink !important;
 }
</style>

上記に示したように親コンポーネントから子コンポーネントにクラスを渡し、子コンポーネントは$$restPropsで受け取るようにします。

注意点としては以下の2点です。

・渡すクラスをGlobalに置く

・上書きするプロパティに「!important」を付与する

「!important」を付与する理由としてREPLで以下のように説明されています。

- cascade effects are unclear (hence `!important`)

実際に行った結果は以下のとおりです。カードの背景色が変更されています。

さて、この方法を採用する場合は子コンポーネントが親コンポーネントから渡されたクラスを受け取れる形になっているか、あるいは親コンポーネントから渡されたクラスを受け取れるように子コンポーネントが改修できる必要があります。

しかし、子コンポーネントがライブラリであるなどの理由で改修できない場合があります。

その場合は以下のように子コンポーネントのクラスを親コンポーネントから指定して変更します。

<!-- Card.svelte -->
<div class="card">
 Svelte
</div>

<style>
 .card {
  border: 1px solid black;
  border-radius: 5px;
  background-color: lightblue;
  padding: 1rem;
 }
</style>

<!-- App.svelte -->
<script>
  import Card from "./Card.svelte";
</script>

<div class="box">
  <Card />
</div>

<style>
 .box :global(.card) {
    background-color: pink;
 }
</style>

結果は以下のとおりです。