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>

Thanks in advance!

Hi all,

I'm having a hard time to complete this trailhead: "Create a Simple Camping List Lightning Component", inside module "Lightning Components Basics".
This is the error message I get:
"Challenge Not yet complete... here's what's wrong:
The component is not using the correct font size."

This is the task-description:

Create a camping component that contains a campingHeader and a campingList component.

The campingList component contains an ordered list of camping supplies that include Bug Spray, Bear Repellant, and Goat Food.
The campingHeader component contains an H1 heading style with a font size of 18 points and displays 'Camping List'.

And here is my code:

camping.cmp:

<aura:component >
    <c:campingHeader />
    <c:campingList />
</aura:component>

campingList.cmp:

<aura:component >
    <ol >
        <li>Bear Repellant</li>
        <li>Bug Spray</li>
        <li>Goat Food</li>
    </ol>	
</aura:component>

campingHeader.cmp:

<aura:component >
    <H1>Camping List</H1>
</aura:component>

And finally the campingHead.css:

.THIS { 
}
H1.THIS {
font-size: 18pt;
}

 

Hi,
the challenge is as follows :

Create a camping component that contains a campingHeader and a campingList component.
1.The campingList component contains an ordered list of camping supplies that include Bug Spray, Bear Repellant, and Goat Food.
2.The campingHeader component contains an H1 heading style with a font size of 18 points and displays 'Camping List'.

so i made a lightening application named "camping.app" having code :

<aura:application >
    <br/><br/><br/>
    <c:campingHeader/>
    <c:campingList/>  
</aura:application>


where lightening component "campingHeader.cmp" having code :

<aura:component >
    <h1> Camping List </h1>
</aura:component>

for I have "campingHeader.css" having code :
.THIS {
}

h1.THIS {
    font-size: 18px;
}

and lightening component "campingList.cmp" having code :

<aura:component >
    <ol>
       <li>Bug Spray</li>
       <li>Bear Repellant</li>
       <li>Goat Food</li>      
    </ol>
</aura:component>

when i preview the application it is working nice; but when checking the challenge it says :
"Challenge Not yet complete... here's what's wrong: 
The 'camping' Lightning Component does not include either the campingHeader or campingList component."

please help me know where I m doing wrong. Thanx waiting for your reply