classを子コンポーネントに渡す

はじめに

表題の通り、つい最近まで子コンポーネントにclass渡す方法知らない私が、上司から「公式サイトに載ってるこのやり方いいよ〜」って教えていただけたので、あたかも自分が最初っから知ってたかのように皆んなに教えます。メモのご用意をお願いします。
備忘録としてこの記事を残していきます。
また、改善前の私のコードも戒めとして晒します。

実装方法

実装方法は公式サイトに載ってるこのやり方になります。

https://docs.astro.build/en/guides/styling/#passing-a-class-to-a-child-component

src/components/MyComponent.astro

---
const { class: className, ...rest } = Astro.props;
---
<div class={className} {...rest}>
  <slot/>
</div>

src/pages/index.astro

---
import MyComponent from "../components/MyComponent.astro"
---
<style>
  .red {
    color: red;
  }
</style>
<MyComponent class="red">This will be red!</MyComponent>

子コンポーネントに...restを使って親要素のdata-astro-cidを渡すことによって、親コンポーネントでスタイリングができるって話です。

改善前

公式サイトにのってやり方を知る前はこのようなやり方でスタイリングを行ってました...

src/pages/index.astro

---
import MyComponent from "../components/MyComponent.astro"
---
<style>
  .hoge .red {
    color: red;
  }
<!-- もしくは -->
  .hoge　:global(.red) {
    color: red;
  }
</style>
<div class="hoge">
 <MyComponent class="red">This will be red!</MyComponent>
</div >

最後

公式サイトにも書いてある通りscopedStyleStrategyの値をclassもしくはwhereに設定してる場合は...restプロパティの渡しは不要ですが、コンポーネントの衝突を避けるためにもscopedStyleStrategyの値はデフォルトのattributeのままでいいのかなと思いました。