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!

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 | |
  • 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 Jun 22 '16 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 Sep 29 '16 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 | |
  • 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 Jun 30 '16 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 | |

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.