Vue - Passing inline css style to child component

Question

I am using vue.js + vuetify, and I have to position a button over a canvas component (here handled by the Konva library)

I managed it by using absolute positining of the button. To clean things up, I want to place this button in a dedicated component.

I would like to pass the positioning css inline to this new child component, but can't figure how to make it work.

I have tried the following two ways

Pass it with a :style="xxx" binding, like I did when using v-btn directly
Passing the positioning to a parent div : works with a div of width != 0 but seems like a kludge. And in this case z-index is not applied to the button.
I could pass the attributes with a dedicated prop, but vuetify does not seem to be needing it

Here is basically my code :

<template>
  <v-container fluid fill-height ref="parentLayout" class="pa-0" :style="{position: 'relative'}">
    <!-- Konva area overwhich the button will be placed drawn over /-->
    <div ref="konvaLayout" :style="{backgroundColor:'rgb( 40, 40, 40 )'}">
      <!-- THIS WORKS /-->
      <v-btn absolute :style="{top:'10%', left:'10%', width: '100px'}"> THIS WORKS </v-btn>
      <!-- THIS DOES NOT /-->
      <my-button :style="{position: absolute, top:'2%', left:'2%'}" />
  </v-container>
</template>

To sum up I have the two following questions:

How can I properly bind :style to the child element, like vuetify does ?
What is the standard way to pass css position attributes to child components ? With style binding like 1) ?

Thank you all for your help

flx · Accepted Answer · 2021-08-30 07:21:48Z

1

The Problem in this case is basically what v-deep is supposed to solve in the css world (whichs is not gonna solve your problem here though)

You don't have a native element inside the konvaLayout div so the style doesn't reach the destined component.

In the MyButton.vue component you'd have two options to solve this:

- `style` Props Overwrite -

//MyButton.vue
<template>
  <v-btn :style="style">{{ label }}</v-btn>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    label: String,
    style: [String, Object]
  }
});
</script>

- Custom Prop -

You use a custom prop-name that is specifically used to style the button in my-button (lol)

//MyButton.vue
<template>
  <v-btn :style="btnStyle">{{ label }}</v-btn>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    label: String,
    btnStyle: [String, Object]
  }
});
</script>

(No gurantee as we weren't provided a codesandbox or similar to verifying if its working)

answered Aug 30, 2021 at 7:21

flx

1,57814 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Charles G Over a year ago

Thank for for your answer ! Based on it I opted for the dedicated custom prop that i named styles. Overriding the style prop triggered a vue warning on my side. Additional notes : passing a :style binding worked, but only if my button is the root element of my child component.

flx Over a year ago

Glad I could help. Event if it was only the right direction

Collectives™ on Stack Overflow

Vue - Passing inline css style to child component

1 Answer 1

- `style` Props Overwrite -

- Custom Prop -

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

- style Props Overwrite -

- Custom Prop -

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

- `style` Props Overwrite -