[SalesForce] Lightning Design System is overridden by styles from app.css

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:

Console Screenshot:

Best Answer

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.

Related Solutions

[SalesForce] Lightning, css and communities

You'll have to use increased CSS Specificity in how you write your style sheet. While you can dive deep into specificity by looking into a specificity chart, the short explanation is that you'll need more selectors to identify things and then you won't need to use !important. For example, instead of this:

.myStyle { 
    background-color: #eee; 
}

do this:

#containerName .classInsideCont div .myStyle {        
    background-color: #eee; 
}

The second example has more CSS selectors and therefor overrides the first.

This image below from the style sheet in the inspector of a community page shows that this element has 4 selectors on it. You would therefore need to either use a specificity from the chart above that overrides this or the shorthand is to just use more selectors (i.e. 5) than this to override it.

[SalesForce] Remove base styles from lightning component framework to use LDS

In init method you can do like this. Find the button by Id. Use aura:id

<ui:button label="New Milestone" press="{!c.newMilestone}" class="slds-button slds-button--brand" aura:id="newmilestonebutton" />

var newbutton = component.find('newmilestonebutton');
$A.util.removeClass(newbutton, 'uiButton--default uiButton');

Or do the same thing in afterRender() method in Renderer file. You have to override the afterRender() method.

Best Answer

Related Solutions

[SalesForce] Lightning, css and communities

[SalesForce] Remove base styles from lightning component framework to use LDS

Related Topic