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 :
![Hello World](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirJgmmXjBAwwBHkeZ4GQzaptgtJ6QSRsxbB5Pxl8L2OWaPUzUbmtwsIhEdbsqW8qfGw6WbB2uxZhyphenhyphenrvBFhLQON-ZjgfdhO9IZHUPw1Su11OgamRzpVISUeKBGPWoREhAzmbisG-kugE-Y/s320/hello.png)
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:
![Hello World1](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzbcNlPZJxZ31EplPrgxNM3DLck6XloMMMDaP7MnUa8kE7axskG-MERkdXaVS2lJ0sEHcee6_5f8h6YEOSqxXDDmuIlFlg8LgSWN7pUiha5WaWxm6eSL34ubrgxZrS-22kLOyqRSJZdOk/s320/hello1.png)
In this example attributes value are directly used in style tag.
Easy Right....!!
Thanks,
Lovesalesforceyes.