Is this possible? RedComponent = Component.classtext-ted

[koresar]

Hello people.

I have, say, a blue button. In 10 places of my app the button should be red. Here is what I'm doing atm:

<template>
<Button class="text-white bg-red hover:text-orange shadow-red"/>
</template>

I'm looking to avoid writing this class="text-white bg-red hover:text-orange shadow-red" 10 times. I'd rather have something like:

export default const RedButton = Button.class`text-white bg-red hover:text-orange shadow-red`;

And then just reuse it everywhere:

<template>
<RedButton/>
</template>

The above approach is the syntax I really like in React's Styled-Components.

Is it possible with (or without?) styled-vue?