How to Pass Additional Classes to an Astro Component

Astro is a powerful framework for building modern web applications, and passing classes to components is a common use case. If you're trying to add or override classes for specific instances of a component while retaining its default styles, this guide has you covered.

The Problem

Suppose you have a reusable component in Astro, like an <ExpansionQuestion> component, with predefined styles:

<details class="group bg-blue-gray duration-300 rounded-lg p-4 w-full shadow-md focus:outline-none focus:ring-0">
  <!-- Content here -->
</details>

You want to reuse this component and add a bg-secondary class for specific views, without removing the existing styles. The question is: how can you achieve this?

The Solution

Here are a few methods to pass additional classes to an Astro component from a parent:

1. Using class:list

Astro's class:list directive allows you to easily manage and merge classes dynamically.

Parent Component Usage

<ExpansionQuestion question="What is Astro?" bg="bg-secondary">
  <Fragment slot="body" set:html="Astro is a modern web framework!" />
</ExpansionQuestion>

Child Component Implementation

In your ExpansionQuestion.astro file, destructure the bg prop and use it with class:list:

---
const { bg } = Astro.props;
---

<details
  class:list={[
    "group duration-300 rounded-lg p-4 w-full",
    "shadow-md focus:outline-none focus:ring-0",
    bg || "bg-blue-gray" // Default class if `bg` is not passed
  ]}
>
  <slot name="body" />
</details>

2. Using a class Prop with Default Styles

You can also accept a class prop directly in the component, allowing you to add or override styles.

Child Component Setup

---
const { class: className = "group bg-blue-gray duration-300 rounded-lg p-4 w-full shadow-md" } = Astro.props;
---

<details class={className}>
  <slot />
</details>

Parent Component Usage

<ExpansionQuestion
  question="What is Astro?"
  class="group bg-secondary duration-300 rounded-lg p-4 w-full shadow-md"
/>

3. Using the Rest Parameter

If your component includes scoped styles, ensure that you preserve Astro's internal data-astro-cid-* attributes by using the rest parameter:

Child Component Implementation

---
const { class: className, ...rest } = Astro.props;
---

<details class:list={["group", className]} {...rest}>
  <slot />
</details>

Why Use These Approaches?

• Retain Existing Classes: Avoid overwriting the default styles.
• Customizable for Each View: Add view-specific styles dynamically.
• Scalable and Maintainable: Reuse components without modifying their internal implementation.

FAQs

1. Why not just override the styles in CSS?

While you can override styles using CSS specificity, passing classes via props provides cleaner and more maintainable code, especially in component-based architectures.

2. What happens if I don't use class:list?

If you directly use class={...}, Astro won't merge the classes; instead, the passed class will replace the default styles.

3. Can I pass multiple classes at once?

Yes, you can pass multiple classes by separating them with spaces in the prop, e.g., class="bg-secondary text-white".