How can I apply css to the child tag from component-CodePudding

<ButtonAtom></ButtonAtom>

this is the button components that I made.

<template>
 <div>
  <button  :>
    <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.

CodePudding user response：

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  v-bind="$attrs" :>
    <slot />
  </button>
 <div>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

CodePudding user response：

Just a shorter example but have you already tried this:

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