如何使用类 props 扩展 Astro 中可重用按钮组件的样式

Question

我正在使用 Astro 开发一个项目，我正在尝试创建一个可重用的按钮组件，该组件允许使用类道具扩展样式。我的目标是将自定义样式传递给按钮，同时保持其默认样式。这是我到目前为止所拥有的：

---
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/>

在这种情况下，.test 没有任何效果

扩展可重用按钮组件的样式

Answer 1

您可以使用 Astro.props 或样式化组件来实现此目的。只需使用 Astro，您就可以使用这样的自定义类来渲染按钮：

<button class={`btn ${Astro.props?.variant}`}>
  {Astro.props?.label}
</button>

<style scoped>
  .btn {
    /* Default styles */
  }
  .btn-primary {  /* Additional style within the component */
    background-color: blue;
    color: white;
  }
</style>

然后将此组件加载到您的代码中并传递自定义类：

<Button label="Click Me" variant="btn-primary" />