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:


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


    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' : ''}

2 Answers 2


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.


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


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


.THIS .red {
    background-color: red;

.THIS .green {
    background-color: green;

Screen Capture

enter image description here


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>


<div class="{!v.applycss ? 'customColor' : 'slds-col slds-size_2-of-12'}">Test message</div>
  • Dave I kept the value as true just for reference. I already tried your first suggestion but that didn't help. The second one serves no purpose as I also need to customColor along with LDS classes. So I modified the same so that else part also has the customColor and that also didn't work.
    – Vasu Gupta
    Jun 9, 2022 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.