In this post I will tell you two ways to set dynamic style values in lightning components.
1.) Use aura:html :
you can use aura:html to give dynamic style to the lightning component . You can give a custom property (--textColor : black; ) in the component (between aura:html with style tag) and access these values in the style bundle ( var(-- textColor) ) to set dynamic style. Refer below example to understand it more clearly :
Component :
I am taking the default value . You can set any valid value by controller.
Style :
.THIS.Dstyle{
Output :
In this example attributes are defined with default value and set this attribute in custom property which is defined in aura:html. Use this custom property in style tab to give style to lightning component
2.) Use attributes directly in the style tag .
Refer below example to understand it more clearly :
Componet :
<aura:component >
Output:
In this example attributes value are directly used in style tag.
Easy Right....!!
Thanks,
Lovesalesforceyes.