How can I apply css to the child tag from component

Question

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

Answer 1

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>