Astroでclassを動的に制御する方法

概要

Astro のコンポーネントで、子コンポーネント側で動的にクラスを追加したりする時の実装方法。

https://wp-kyoto.net/use-class-list-instead-of-clsx-in-astro/

コンポーネントをつくる

Astro.propsから class プロパティを取得し、それを className という名前の変数に割り当て、Astro のclass:list属性でクラス名と className 変数の値が含まれる配列を渡す。

ButtonLink.astro

---
interface Props {
  href: string;
  text: string;
  class: string;
}
const { href, class: className } = Astro.props;
---

<a href={href}>
  <button class:list={["button", className]} type="button" {...props}>
    <slot />
  </button>
</a>

<style lang="scss">
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 32px;
    color: inherit;
    border: 1px solid #333;
    border-radius: 14px;
    transition: ease 0.3s;
  }
</style>

子コンポーネント側でクラスを追加する

index.astro

---
import ButtonLink from "../components/ButtonLink.astro";
---

 // デフォルトのボタン
 <ButtonLink href="/">Default Button</ButtonLink>

 // 白のボタン
 <ButtonLink href="/" class="secondary-button">Secondary Button</ButtonLink>


<style lang="scss">
  .secondary-button {
    color: #000;
    background-color: #ffff;
  }
</style>