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

Adding a ui:button in Lightning Component Framework results in classes
uiButton–default and uiButton being added.

In order to use Lightning Design System, I need to remove these classes (or override the CSS styling for these classes). I'm using LDS classes slds-button slds-button–brand.

I can't see an obvious way to turn off all default LCF styling in order to use LDS. Although I can see responses on a previous question indicating this has been resolved?

Thanks!

Best Answer

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.

Related Solutions

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

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.

[SalesForce] How to add CSS framework to template using Community Builder

You can add CSS frameworks to the template by editing the HTML Head Markup of the template in the community builder. Shown below.

Go to Community Builder -> Settings -> Advanced -> Edit Head Markup

Once You Click the Edit Head Markup Button, you will get a popup like shown in the image below where you can add CSS frameworks and other libraries just like you do in HTML.

NOTE:

Doing the above will add the CSS framework to each and every page of your community which might effect the standard CSS of the template. If you don't want that to happen, you can use lightning components with its <ltng:require> attribute. Something Like Below

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">

  <ltng:require
   styles="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
   scripts='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js,
   https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'/>

  <button type="button" class="btn btn-success">Success</button>

</aura:component>

I hope this helps :)

Best Answer

Related Solutions

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

[SalesForce] How to add CSS framework to template using Community Builder

Related Topic