You need to sign in to do that
Don't have an account?

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.

Thanks in advance!
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>
Thanks in advance!
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 selector is more specific and will correctly style the reimbursed items.
All Answers
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 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 )
@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.
As seen in the picture, the slds-theme--success / slds-theme_success is overruled by slds-card.
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 selector is more specific and will correctly style the reimbursed items.