0

I'm trying to use this approach (In vue.js component, how to use props in css?) to put prop-based variables in my css code.

I have a component called TouchLayout, and I would like to edit a css property belonging to a <main> tag that is a grand parent of my component. Usually I put my css variables in :root, but for this task I think I can't do it.

So I am currently setting this computed prop in my component:

computed: {
    cssProps() {
      return {
        '--main-padding-bottom': this.hasFooter ? '40px' : '20px'
      }
    }
  }

and in template I use

<template>
  <div class="h-full" :style="cssProps">
...

But my css var isn't recognized:

<style>
main.v-main {
  padding-bottom: var(--main-padding-bottom);

Is it possible to set a css var in a child component and, by the magic of unscoped css, use it in a grand parent?

Ali Bahrami
  • 910
  • 9
  • 21
Bruno Lamps
  • 544
  • 6
  • 27
  • 1
    You can't do that. It's not related to Vue, just common HTML/CSS. CSS vars are hierarchical, in order for cssProps to affect main.v-main it should be added to main or its parent. – Estus Flask Jul 10 '23 at 17:54
  • Thanks! I have a different approach in mind, but if that fails I'll try to $ref a root component and put the var in there. – Bruno Lamps Jul 10 '23 at 18:32

0 Answers0