I’m working on a project using Astro and I’m trying to create a reusable button component that allows for extending styles using class props. My goal is to pass custom styles to the button while maintaining its default styles. Here’s what I have so far:

---
const {
  onClick = () => {},
  type = "button",
  variant = "primary",
  size = "md",
  class: className = "",
} = Astro.props;
---

<button
  type={type}
  onclick={onClick}
  class={`btn ${variant} ${size} ${className}`}>
  <slot />
</button>

<style>
  .btn {
    cursor: pointer;
    border-radius: 6px;
    transition-property: all;
    transition: 0.2s;
    box-shadow: 0 1px 3px hsla(0,0%,0%,.2);
    width: max-content;
    max-width: 100%;
  }

  .btn:active {
    transform: scale(0.95);
  }

  /* Size variants */
  .btn.md {
    padding: 12px 16px;
    font-size: 16px;
  }

  .btn.lg {
    padding: 15px 30px;
    font-size: 20px;
  }

  /* Color variants */
  .btn.primary {
    background-color: var(--primary);
    color: white;
  }

  .btn.primary:hover {
    background-color: var(--primary-hover);
  }

  .btn.secondary {
    background-color: var(--secondary);
    color: white;
  }

  .btn.secondary:hover {
    background-color: #var(--secondary-hover);
  }
</style>

 <Button variant="secondary" class="test" >example</Button>

<style>
    .test{
        background-color: red;
    }
<style/>

In this case the .test is not doing any effect

extend styles of a reusable button component