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:
enter image description here

Console Screenshot:
enter image description here

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.

Attribution
Source : Link , Question Author : PKMAN , Answer Author : Stephanie Rewis

Leave a Comment