I'm quite new to SF developing so you'll see me posting quite often.

I have developed this component that looks like this on preview mode in Dev Console (you know, when you click on the preview button in the .app application).

enter image description here

enter image description here


it's looking quite different (and more ugly) when I'm adding the component to a new Tab I've created

enter image description here

What is going on here and why is this looking so different ??

Many thanks :D


The styles are actually messed up in the preview, too, but it's harder to tell because of the nearly-white background of a Lightning App. In the Lightning Experience, the branding is applied, which includes a blue background. This is where the difference in appearance comes from.

Try adding a colored background to the app and you'll see what I mean. You'll want to fix your code so that it conforms to the Lightning Design System, which may take significant rewrites from what I can tell from the images, or consider using standard elements (e.g. lightning:card) instead, as those will apply the styles correctly for you.

  • Thank you very much for the answer !! This is not very nice from the Framework :( Jun 19 '20 at 15:32
  • So how do you actually KNOW if the component you're previewing is the same that you will see when you add it to a tab ? Like, is there a way to preview what I will actually will end up adding to the tab or I just have to know how to use it and pray ?? Jun 19 '20 at 15:39
  • 1
    @NachoZveDeLaTorre Either add a background to the Lightning App, or add a container around your Lightning Component. The default behavior for a component is to have a transparent background, meaning whatever you don't explicitly set to a color will be see-through. This behavior is "nice" in that it helps the branding to show through, but you need to remember to consider this when using a "preview" app. I would recommend you look at Themes for examples of how to set a background for your component.
    – sfdcfox
    Jun 19 '20 at 15:46
  • Thanks for the help my brother :D Very appreciated (sorry for my spelling) hahah Jun 19 '20 at 16:05

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.