1

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!

Improve this question

3 Answers 3

Reset to default
2

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.

Improve this answer
2
  • Thanks Jai. I was hoping for a more standard solution - similar to the standardStylesheets="false" option in Visualforce pages. There must be a way to use LDS without having to individually remove every LCF class in javascript?
    – Neil
    Commented Jun 22, 2016 at 11:09
  • This worked quite nicely for us and very easy to implement. Also, the solution is still self-contained in the component. Thanks!
    – mkorman
    Commented Sep 29, 2016 at 15:48
2

I posted an idea here: Lightning Component Styling on UI Components

Also unpalatable for its own reasons but it works. Will paste it below.

For what it's worth you can see a comprehensive list of all the styles added to the ui:button component here: https://github.com/forcedotcom/aura/blob/master/aura-components/src/main/components/ui/button/buttonFlavors.css

There's one sort of brute-force solution I used to just wipe out these styles, not with ui:button but with another component... I made my own component that does nothing but inherit from the ui element but I set all its custom CSS attributes to "inherit". So for ui:button it would look like this:

neutralButton.cmp:

<aura:component extends="ui:button">
    {!v.body}
</aura:component>

neutralButton.css:

.THIS{
    font-weight: inherit;
    font-size: inherit;
    margin: inherit;
    padding: inherit;
    text-decoration:inherit;
    text-align:inherit;
    border-radius:inherit;
    border:inherit;
    border-top:inherit;
    background:inherit;
    background:inherit;
    box-shadow:inherit;
    text-shadow:inherit;
}

.THIS:hover,
.THIS:focus,
.THIS.is-selected{
    background:inherit;
    background:inherit;
    text-shadow:inherit;
}

.THIS .label{
    white-space:inherit;
    color: inherit;
}
.THIS:hover .label,
.THIS:focus .label{
    color: inherit;
}
.THIS:disabled{
    cursor:inherit;
    background:inherit;
    box-shadow:inherit;
    text-shadow:inherit;
}
.THIS:disabled .label{
    color:inherit;
}
.THIS:disabled .label:hover{
    color:inherit;
}

And then use a c:neutralButton instead of a ui:button and it no longer hijacks the SLDS styles. Still it's a little silly that this ends up being the only reliable way to shut off hard-coded component styles.

Improve this answer
1
  • Now this is clever! I've just called mine button instead of neutralButton, as I plan to use this in place of ui:button going forward.
    – Ben Naylor
    Commented Jun 30, 2016 at 22:29
0

Lightning contains base components in the lightning namespace, one of these is button. It is recommended in introducing base lightning components that where there is a matching ui and lightning namespace component that you use the lightning namespace.

<lightning:button label="Submit" variant="brand" onclick="{!c.clickEvent}"/>

In the above example the button will render without the uiButton classes.

Improve this answer

You must log in to answer this question.

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