Как расширить стили многоразового компонента кнопки в Astro, используя реквизиты класса ⇐ CSS

[Anonymous]

Я работаю над проектом с использованием Astro и пытаюсь создать повторно используемый компонент кнопки, который позволяет расширять стили с помощью реквизитов класса. Моя цель — передать пользовательские стили кнопке, сохранив при этом стили по умолчанию. Вот что у меня есть на данный момент:

Код: Выделить всё

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






.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);
}

Код: Выделить всё

 example


.test{
background-color: red;
}

В этом случае .test не оказывает никакого эффекта.
расширяет стили повторно используемого компонента кнопки.

Подробнее здесь: https://stackoverflow.com/questions/787 ... lass-props