Is there a way to read data as props in vueJs component and use as value of < style > section?
something like :
<my-component color="red" />
and to use red as a dynamic value inside < style > section of component.
Add a comment
|
2 Answers
v-bind can help you with dynamic styling in vue.js as explained [here][1].
The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:
HTML
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
vue instance
data: {
activeColor: 'red',
fontSize: 30
}
Now activeColor is reactive here, whenever you change activeColor it will change in the HTML/CSS as well.
[1]: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1
6 Comments
Sajed
I want to use data value inside <style></style> section. like : <style> .className { color: color-data } </style>
Sajed
actually I'm useing datepicker which I need to override its classes to match with my theme color
Sajed
I have hardcoded this class and it works fine but can't make it flexible: .calendar .cell.highlighted { color: #ffffff; background-color: #4f8fcc!important; } #4f8fcc should set with props value
Saurabh
@SaJed I am using vue-datepicker where I can send color etc in the option variable.
|
Be aware that for CSS properties that have "-" in like background-color you will need to write it slightly different to meet JS object style. Since json object definition format does not allow - in name.
this will work
v-bind:style="{ 'background-color':backgroundColor }"
this will NOT work
v-bind:style="{ backgroundcolor:backgroundColor }"
chaos all the way from Pakistan. :)
