4

I am beginning to make a simple app and I am using SLDS. When I preview the app from the Developer Console, the SLDS styles are not being applied. But if I put the component on a Lightning Community the styles are applied.

Lightning App:

<aura:application>
    <c:DownloadComponent/>
</aura:application>

Download Component:

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" >

<div class="slds">
    <div class="slds-grid slds-grid--vertical-stretch slds-wrap">
        <div class="slds-size--1-of-3">
            buttons
        </div>
        <div class="slds-size--1-of-3">
            buttons
        </div>
        <div class="slds-size--1-of-3">
            buttons
        </div>
    </div>
</div>

Preview: enter image description here

Lightning Community: enter image description here

Do I need to import SLDS for only previewing it through the developer console?

14

You can include Lightning at the application level:

<aura:application extends="force:slds">
    <c:DownloadComponent/>
</aura:application>

This way, you don't need to have your component import SLDS only for previewing.

  • 1
    Perfect! @sfdcfox – Programmatic May 30 '17 at 18:05
  • Is there any reasoning as to why this happens? – Javier García Manzano Aug 1 '18 at 10:34
  • @JavierGarcíaManzano the default app doesn't include slds. This lets you include your own style, e.g. bootstrap. If you want SLDS, you have to "ask" for it. – sfdcfox Aug 1 '18 at 10:41
  • Adding extends=”force:slds” did not work for me - what else can I try? @JavierGarcíaManzano – Cal Almodovar Oct 30 '18 at 19:35
  • This worked for me as usual. Thanks @sfdcfox! You are a saviour! – MnZ Apr 19 at 7:42

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.