<ButtonAtom></ButtonAtom>
this is the button components that I made.
<template>
<div>
<button class="px-2 py-1" :class="[borderRadius, backgroundColor]">
<slot />
</button>
<div>
</template>
and this is the html tag inside the components.
If I add css to the <ButtonAtom> like <ButtonAtom color="white">
color connects to the root tag which is <div>
the point is if I try to connect the css to <button>.
Is there any ways to connect to <button> without deleting the root html <div>
P.S this is vue3.
You should pass a style attribute with color:white as property <ButtonAtom style="color:white"> then inside the child component add inheritAttrs:false and bind that $attrs to the button element:
<template>
<div>
<button class="px-2 py-1" v-bind="$attrs" :class="[borderRadius, backgroundColor]">
<slot />
</button>
<div>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
Just a shorter example but have you already tried this:
<button style="color: white"></button>
you can pass in the color as a prop to the button component and use it on the button itself
<template>
<div>
<button class="px-2 py-1" v-bind="$attrs" :class="[borderRadius, backgroundColor]">
<slot />
</button>
<div>
</template>
<script>
export default {
props: {
color: String,
}
}
</script>
and use it in the parent component like
<ButtonAtom color="white">