Some of the CSS styles from Lightning Design System is overridden by styles from app.css which is loaded as a part of Salesforce1 app. We are facing some issues with this.

Description of Issues:

In LDS "Salesforce Sans" font is used but it is overridden by "ProximaNovaSoft-Regular" from app.css. Similar issue happens in button styling also. In lightning design guide, they provide some classes for buttons like ".slds-button--brand", as per the definition the button background color should change to blue. But in our case the background color and text colors are overridden and the effect of this class is disabled.

Code snippet in Component: enter image description here

Console Screenshot: enter image description here

  • 2
    have you found any solution to this issue?
    – VarunC
    Nov 9, 2015 at 17:06

5 Answers 5


First on the font. one.app should be serving Salesforce Sans. What version are you currently in?

Are you scoping your component? (This means putting the .slds class on the top level of your component.) Are you using the CSS provided in the download that ends in -ltng.css?

I'm assuming you're using ui:button to get your button style? The SLDS styles are not built onto the Ligtning components yet. You can either use a simple or you can write your own button component with SLDS styles.

The scoping will give your SLDS CSS a level higher of specificity. I would not recommend using IDs or !important in your CSS.

Hope that helps.

  • 2
    Welcome to the community, Stephanie!
    – Mark Pond
    Sep 21, 2015 at 22:36
  • Thanks Mark, I'm going to have to get the hang of it here. :) Oct 7, 2015 at 18:15

The problem is that at Salesforce they haven't integrated Lightning Components with the Lightning Design System properly yet. Fortunately, like most of the time, a work-around can be found.

My work-around is based on the assumption that they should foresee the possibility to simply switch off the standard Lightning Components styles (just like you can do in VisualForce). By inspection of the page, I found that these were in a link tag of which the Url ends on '/app.css'. When I removed this link (via the inspection tools in Firefox), I saw that the Lightning Design System style was properly rendered.

So, now the only thing to do is to automate that in the lightning app. Assuming you are building a Lightning app, the place to incorporate that is in the highest level component, the app.

Assuming your app is called MyApp:
First, go into the helper of your app (a resource called MyAppHelper.js) and put this in it:

    removeAppStyles : function() {
        var allLinks = document.getElementsByTagName('link');
        var badLink;
        for (var i = 0; i < allLinks.length; i++) {
            var badName='/app.css';
            if (thisLinkUrl.substring( thisLinkUrl.length - badName.length, thisLinkUrl.length ) === badName) badLink = allLinks[i];

This function will simply look up a stylesheet reference of which the url ends on '/app.css' and remove it from the DOM.

Next, make sure the function is called at the right time. This is done by creating a custom renderer. Go into the renderer of the app (a resource called MyAppRenderer.js) and put this in it:

    render : function(cmp, helper) {
        helper.removeAppStyles();//work-around for the fact that the app's stylesheets are inserted while we want to use SLDS which are messed up by these std styles
        var ret = this.superRender();
        return ret;

This renderer will remove the app's standard stylesheet from the dom, and will then proceed with rendering the dom in the standard way by calling the renderer of the super component (which is part of the framework).

Now refresh your app and you will see proper styling.

Disclaimer: this worked for me with my small example. There may be some caveats that may turn up in more complex situations. If so, let me know!

  • 1
    any clue if this method will work on communities? I am trying to get rid of app.css, since it is messing up with bootstrap css.
    – Rao
    Oct 29, 2015 at 17:31
  • @Rao It works, but app.css in the community (at least), has a query parameter additionally, so this code does not work. However, simply replacing the if condition by if (thisLinkUrl.indexOf(badName) > -1) {....} did the trick for me. Just make sure you do not have another stylesheet named app.css ... Apr 27, 2021 at 13:03

Since SLDS CSS is now included in app.css this should no longer be necessary. Cheers!

  • Does this mean that we no longer have to download and bundle SLDS with our app? Is there anything we need to do to have these styles applied? Is there some documentation on how to do this now that it's included? Thanks!
    – mkorman
    Sep 22, 2016 at 11:57

Generate a scoped class. https://tools.lightningdesignsystem.com/css-customizer

The css will have the -ltng at the end of it so make sure your pointing to the css properly.

<ltng:require styles="/resource/SLDSW17/assets/styles/salesforce-lightning-design-system-ltng.css"/>

In your scoping div in your application is where you place the scope name you selected earlier.

<div class="tcct">

 <!-- Your component -->


That is it. You shouldn't need to add a scoping div in your component in my experience. Using a scope is the only way I could find to get the lightning css to properly apply (win out over other CSS).

  • Unfortunately, this fixes many issues but there remains some. Example, a lightning button still has app.css overwrite it's color. Sep 29, 2016 at 16:13

The latest version of LDS resolved our issue. Thanks for all the responses.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .