Apply css class based on specific condition in Lightning component along with standard Lightning Design System

Question

I'm trying to implement a css property from the style class of the Aura component based on the value of Aura attribute along with certain other slds class as well, which will be static.

Below are the Aura component and css file snippets that I have used and it's not working:

Aura:

The attribute is kept as true for reference and it's value will be updates based on certian funtoinality in the JSContoller

<aura:attribute name="applycss" type="Boolean" default='true'/>

<div class="{! 'slds-col slds-size_2-of-12' + ' ' +  if(v.applycss,'customColor','')}">
    Test message
</div>

Css:

.THIS.customColor{
    background-color: #71B4FF !important;
}

FYI: inside the class I also tried the below 3 logic but nothing worked.

{! 'slds-col slds-size_2-of-12' + ' ' +  if(v.applycss,'duplicateColor','')}
{! 'slds-col slds-size_2-of-12' + ' ' +  (v.applycss? 'duplicateColor' : '' )}
{!'slds-col slds-size_2-of-12' & v.applycss? 'duplicateColor' : ''}

Answer 1

You can add the the standard SLDS class inside the expression in both conditions. something like this

<div class="{! v.applycss ? 'slds-col slds-size_2-of-12 customColor' : 'slds-col slds-size_2-of-12'}">

I applied the same in a small code and it worked.

cmp

<aura:component>
    <aura:attribute name="applycss" type="Boolean" default='true'/>
    <ul>
        <li class="{! v.applycss ? 'slds-text-title_caps red' : 'slds-text-title_caps green'}">Dynamic Background.</li>
    </ul>
    <lightning:button label="Change Color" variant="brand" onclick="{!c.changeColor}"/>
</aura:component>

Controller

({
    changeColor : function(component, event, helper) {
        component.set("v.applycss", false);     
    }
})

CSS

.THIS .red {
    color:white;
    background-color: red;
}

.THIS .green {
    color:white;
    background-color: green;
}

Screen Capture

Answer 2

You don't need to compare a Boolean value to true, it's already true. You can try below one:

<div class="{!'slds-col slds-size_2-of-12' +  v.applycss ? 'customColor1' : ''}">Test message</div>

OR

<div class="{!v.applycss ? 'customColor' : 'slds-col slds-size_2-of-12'}">Test message</div>