Use Attribute to set background Color on Lightning Compoents

aura-attributelightning-aura-components

I would like to use an attribute to set the Background Color on the my Lightning Component.
I attempted to apply the solution in the post below, but was unable to adapt this for my Component.
Expressions in the CSS file?

Below is my Component and CSS where we are currently setting the background color statically.

Component

    <aura:component implements="forceCommunity:availableForAllPageTypes,force:appHostable" access="global" >
    
    <aura:attribute name="URL" type="String" default="" />
    <aura:attribute name="Title" type="String" default="" />
    <aura:attribute name="Image" type="String" default="" />
    <aura:attribute name="Description" type="String" default="" />
    
    
    <div class="c-container1" id="main-content">
        <lightning:layout multipleRows="true" horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small" size="3"  class="box-1">
                <div class="card-contains">
                    <a href="{!v.URL}" class="">
                        <div>
                            <div class="results__name">
                                <center>
                                    <div class="headingMain">
                                        <h3 class="heading">{!v.Title}</h3><br />
                                    </div>
                                    <div class="results__logo">
                                        <center>
                                            <img class="elemLogo1" src="{!$Resource.KimbleImages + '/eleImg.2/'+v.Image}" />
                                        </center>
                                    </div>
                                    <div class="headingDetailMain">
                                        <p class="headingDetail">{!v.Description}</p>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </a><br/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

CSS

    .THIS a{
    text-decoration:none !important;
}
.THIS .box-1{
    Background-color:#FFFFFF;
    border-radius: 1 px;
    width: 450px;
    height: 100%;
    border-style: none;
    border-radius: 10px;
   
}
.THIS .headingMain{
   overflow: hidden;
   height: 40px;
}
.THIS .headingDetailMain{
   overflow: hidden;
   height: 60px;
}

Best Answer

You can define all css combination in your css file then pass the class name dynamically from you server side.

<aura:component description="StackTest" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
    force:hasRecordId,lightning:actionOverride,lightning:isUrlAddressable" access="global">

    <aura:attribute name="URL" type="String" default="https://www.google.com"/>
    <aura:attribute name="Title" type="String" default="Test Me"/>
    <aura:attribute name="Image" type="String" default=""/>
    <aura:attribute name="Description" type="String" default="Test Desc"/>
    <aura:attribute name="BackgroundCSS" type="String" default="box-1"/>


    <div class="c-container1" id="main-content">
        <lightning:layout multipleRows="true" horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small" size="3" class="{!v.BackgroundCSS}">
                <div class="card-contains">
                    <a href="{!v.URL}" class="">
                        <div>
                            <div class="results__name">
                                <center>
                                    <div class="headingMain">
                                        <h3 class="heading">{!v.Title}</h3><br/>
                                    </div>
                                    <div class="results__logo">
                                        <center>
                                            <!--<img class="elemLogo1" src="{!$Resource.KimbleImages + '/eleImg.2/'+v.Image}" />-->
                                        </center>
                                    </div>
                                    <div class="headingDetailMain">
                                        <p class="headingDetail">{!v.Description}</p>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </a><br/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>

    <div>
        <lightning:button type="button" value="Change Color" onclick="{!c.changeColor}">Change Color</lightning:button>
    </div>
</aura:component>

Controller:

({
    changeColor: function (component, event, helper) {
       component.set('v.BackgroundCSS', 'box-2')
    },
});

css:

.THIS a{
    text-decoration:none !important;
}
.THIS .box-1{
    Background-color: #3a4834;
    width: 450px;
    height: 100%;
    border-style: none;
    border-radius: 10px;

}

.THIS .box-2{
    Background-color: #8f918e;
    width: 450px;
    height: 100%;
    border-style: none;
    border-radius: 10px;
}

.THIS .headingMain{
    overflow: hidden;
    height: 40px;
}
.THIS .headingDetailMain{
    overflow: hidden;
    height: 60px;
}

enter image description here

Related Topic