14

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 '15 at 17:06
11

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 '15 at 22:36
  • Thanks Mark, I'm going to have to get the hang of it here. :) – Stephanie Rewis Oct 7 '15 at 18:15
6

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++) {
            thisLinkUrl=allLinks[i].href;
            var badName='/app.css';
            if (thisLinkUrl.substring( thisLinkUrl.length - badName.length, thisLinkUrl.length ) === badName) badLink = allLinks[i];
        }
        badLink.parentNode.removeChild(badLink);        
    }
})

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 '15 at 17:31
5

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 '16 at 11:57
3

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 -->

</div>

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. – Aaron Clancy Sep 29 '16 at 16:13
1

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

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.