What is the best way to add CSS styling to the child elements within a component?

Question

What is the best way to add CSS styling to the child elements within a component?

<ButtonAtom></ButtonAtom>

this is my custom button component.

<template>
 <div>
  <button class="px-2 py-1" :class="[borderRadius, backgroundColor]">
    <slot />
  </button>
 <div>
</template>

and this is the html tag within the component.

If I add CSS to the <ButtonAtom> like

<ButtonAtom color="white">

the color applies to the root tag, which is <div>

The challenge is trying to apply the CSS to the <button> instead.

Is there a way to style the <button> without removing the root HTML <div>?

P.S. This is for Vue3 project.

javascript html css typescript vue.js

Answer 1

Answer №1

To ensure the text within the button appears as white, you will need to include a style attribute with color:white like this:

<ButtonAtom style="color:white">

. Next, inside the child component, make sure to add inheritAttrs:false and bind the $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

To ensure the text within the button appears as white, you will need to include a style attribute with color:white like this:

<ButtonAtom style="color:white">

. Next, inside the child component, make sure to add inheritAttrs:false and bind the $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 3

Answer №2

Here's a brief example for you to consider:

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

Answer 4

Here's a brief example for you to consider:

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

Answer 5

Answer №3

Simply pass the color as a property to the button component and apply it directly on the button element

      <template>
     <div>
      <button class="px-2 py-1" v-bind="$attrs" :class="[borderRadius, backgroundColor]">
        <slot />
      </button>
     <div>
    </template>
    <script>
    export default {
      props: {
    themeColor: String,
  }
    }
    </script>

You can then use it in the parent component like this

<ButtonAtom themeColor="blue">

Answer 6

Simply pass the color as a property to the button component and apply it directly on the button element

      <template>
     <div>
      <button class="px-2 py-1" v-bind="$attrs" :class="[borderRadius, backgroundColor]">
        <slot />
      </button>
     <div>
    </template>
    <script>
    export default {
      props: {
    themeColor: String,
  }
    }
    </script>

You can then use it in the parent component like this

<ButtonAtom themeColor="blue">

What is the best way to add CSS styling to the child elements within a component?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to move or rearrange columns in an HTML table using drag-and

What is the best way to implement backup style attributes for a React JS component?

Add a SlideUp effect to the .removeClass function by using a transition

Changing the value of a focused input in the Android browser using programming methods

Making a call to Ajax while specifying the contentType as 'application/json'

Encountering a 403 error when attempting to upload files to Google Cloud Storage (GCS) using Signed URLs

What could be causing the inability to 'GET' a page on an express app?

How can I make tooltipster display tooltips properly?

Browser reports that the value "content" for flex-basis is not valid

Secrets to concealing a Material UI column based on specific conditions?

Tips on positioning the navbar to the right edge of the screen

Functional programming: Retrieve the initial truthy output from executing an array of diverse functions using a particular parameter

Is there a way to track and detect alterations to an element using JavaScript or jQuery

Identify the mouse's location in relation to its parent element, not the entire webpage

``There seems to be an issue with AngularJS UI-view not loading properly when ngOptions

Building personalized error messages using graphql-js and express

Assign a class to the initial element of the Vuetify v-select module

Content in Tab Fails to Load due to IFRAME URL

In a React application, adjusting the main container height to 100vh results in the window.scrollY position being set to

Common mistakes encountered when utilizing webpack for react development