How can I apply css to the child tag from component

user_14037588 0
Viewed 56

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

vue.js typescript css html javascript
3 Answers

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

Just a shorter example but have you already tried this:

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

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