function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
adriancgadriancg 

Trailhead expense app, reimbursed expense background not changing correctly.

Hello,

I am currently going through the Lightning trailhead and I am building the expense app. When an expense is marked as reimbursed it's supposed to get a green background thanks to the .slds-theme--success class. However this style looks like it is being overridden by the .slds-card white background. Has anyone experienced this error? I could fix it by adding something like this to the component.
 
/*.slds-theme--success.THIS {
    background-color: rgb(4, 132, 75)!important;
}*/
But that honestly feels like cheating. Has anyone faced this issue. I've copied and pasted the code straight from Trailhead but it's not working as expected. Here is the component code and a screenshot illustrating the problem.
<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="formatdate" type="Date"/>
    <aura:attribute name="expense" type="Expense__c"/>
 
 
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
            Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle"
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>



User-added image

Thanks in advance!
Best Answer chosen by adriancg
adriancgadriancg
Answering my own question after gaining some experience haha.

The issue here is that the expenseList component and and the expenseItem component both use lightning cards so the css selector with the higher specificity gets applied (.slds-card .slds-card has a specificity of 0,2,0) instead of the .slds-theme--success selector (0,1,0). One of the options is to use the !important keyword, but I don't really like that.

The "nicer" solution IMO is to add the following style to the expenseItem.css file
 
.THIS.slds-card.slds-theme--success {
    background-color: rgb(4, 132, 75);
}

This selector is more specific and will correctly style the reimbursed items.

All Answers

adriancgadriancg
Whoops, image got compressed. Here is a link to a bigger one. https://i.imgur.com/OLg3coa.png
sfdcMonkey.comsfdcMonkey.com
hi adriancg,
i think this is not a issue, actaully <lightning:card > tags add default class :  '.slds-card'  in this class we have a defult background class with background: rgb(255, 255, 255); so bascilly if the  Reimbursed__c button is selected then  'slds-theme--success'  class will be added by ternary statement
class="{!v.expense.Reimbursed__c ?  'slds-theme--success' : ''}"
else it will be remove and defaul card  backgournd (rgb(255, 255, 255);) will  be show 

i hope it helps you.
 Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others in future
thanks 
http://sfdcmonkey.com  (http://sfdcmonkey.com )
 
TriopticonTriopticon
I have the same issue. Would be nice if the information in the trailhead was correct and tested for errors. ;-) :-D

@piyush_soni, your replay did not give any meaning other than this is true. However the problem is the flawes that are in SLDS. ;-)
The level of importance of the various CSS rules is the main issue as far as I am concerned.
TriopticonTriopticon

User-added image

As seen in the picture, the slds-theme--success / slds-theme_success is overruled by slds-card.

adriancgadriancg
Answering my own question after gaining some experience haha.

The issue here is that the expenseList component and and the expenseItem component both use lightning cards so the css selector with the higher specificity gets applied (.slds-card .slds-card has a specificity of 0,2,0) instead of the .slds-theme--success selector (0,1,0). One of the options is to use the !important keyword, but I don't really like that.

The "nicer" solution IMO is to add the following style to the expenseItem.css file
 
.THIS.slds-card.slds-theme--success {
    background-color: rgb(4, 132, 75);
}

This selector is more specific and will correctly style the reimbursed items.
This was selected as the best answer
Lawrence Coffin (P)Lawrence Coffin (P)
Thanks adriancg! Same issue here and your tweak gets it working properly.