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?

Improve this question
2
  • 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. Commented Jul 10, 2023 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. Commented Jul 10, 2023 at 18:32
Related questions
3724
Set cellpadding and cellspacing in CSS?
33
How to inherit css styles in child component from parent in Angular 5
249
vuejs update parent data from child component
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.