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>

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

Answer 2

只是一个较短的示例，但您是否已经尝试过：

<button style="color: white"></button>

Answer 3

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