Leveraging Vue properties within CSS styling

Question

Leveraging Vue properties within CSS styling

I am looking to utilize Vue data/prop variables within the <style> tag located at the bottom of my component.

For example, suppose I have a component structured like this:

<template>
  <div class="cl"></div>
</template>
<script>
export default {
  data () {
    return {
      val: '30px'
    }
  } 
..
}
</script>
<style>
.cl p{
  height: 30px;
}
</style>

I want to find a way to incorporate the val data variable into the <style></style> in order to style accordingly.

I understand that using

<div :style="{'height':val}"></div>

allows for styling based on Vue props/variables but it only sets the style for that specific div. I aim to apply a consistent style to all p tags or any other tags inside my div by declaring it as a class.

One approach is defining a class and toggling its activation (true/false) value, such as :

<div :class="{'cl': someBoolVariable}"></div>

. However, what if I require the height to be dynamic, adjusting based on some calculation/value passed from the parent component?

Ideally, I am seeking something along these lines:

<style>
.cl p {
  height: val;
}
</style>

If anyone has suggestions on how to achieve this, or a simple workaround to make it possible, kindly share.

javascript html css vue.js

Answer 1

Answer №1

To accomplish this, simply utilize a CSS variable within your primary div element

<template>
  <div class="cl" :style="'--p-height: ' + val"></div>
</template>

<script>
  export default {
    data() {
      return {
        val: '30px'
      } 
    }
  }
</script>

<style>
.cl p {
  height: var(--p-height);
}
</style>

For reference, here is a jsfiddle example

Answer 2

To accomplish this, simply utilize a CSS variable within your primary div element

<template>
  <div class="cl" :style="'--p-height: ' + val"></div>
</template>

<script>
  export default {
    data() {
      return {
        val: '30px'
      } 
    }
  }
</script>

<style>
.cl p {
  height: var(--p-height);
}
</style>

For reference, here is a jsfiddle example

Answer 3

Answer №2

Vue 3 makes styling easier with the v-bind directive for applying styles:

<template>
  <div class="textbox">Styled text</div>
</template>

<script setup lang="ts">
const textColor = '#3478ae'
</script>

<style scoped lang="scss">
.textbox {
  color: v-bind(textColor);
}
</style>

Answer 4

Vue 3 makes styling easier with the v-bind directive for applying styles:

<template>
  <div class="textbox">Styled text</div>
</template>

<script setup lang="ts">
const textColor = '#3478ae'
</script>

<style scoped lang="scss">
.textbox {
  color: v-bind(textColor);
}
</style>

Leveraging Vue properties within CSS styling

Answer №1

Answer №2

Similar questions

Mastering the art of column stacking with CSS on your WordPress website

Press one button to activate another button

Guide to iterating within a loop with a variable number of iterations above or below the specified amount in JavaScript

Is it possible to execute a function once an element has finished loading?

Retrieve information and update state right before component display in React Native

Issue occurred while executing the fs.rename() function in a loop in Node.js

Submitting data using various submit buttons in PHP

Using JavaScript Regular Expressions to locate all prefixes leading up to a specific character

Using Jquery to handle input data in a form

Troubleshooting: My Bootstrap collapse navbar refuses to cooperate

Vue component fails to trigger upon receiving the 'mouseleave' event

Unable to locate the reverse for 'my_views_name' without any arguments in Django. Bridging server-side code with client-side JavaScript using jQuery

When modifying an array, the v-for directive causes all styles to be re-rendered

When using a variable to fetch data in JSON, an undefined error occurs. However, if a hardcoded index

continuously refresh choices available for selection

Automating user login with node.js and passport.js: A step-by-step guide

JSON file not found by the system

Show the cell data when the checkbox next to it is selected

Tips for customizing the color of Menu in material-ui v5

Vue transition not functioning properly when hovering over text for changes