CSS Style for ui:button in Lightning Component non rendering

Question

I followed the instructions in the Lightning Components Developer Guide for applying CSS to a ui:button in my Lightning component, but the style isn't showing up.

Here's the button in my component:

<ui:button label="Box Volunteer Folder" press="{!c.navigate}" class="btn" />

Here's the CSS:

.THIS.uibutton.btn {
   background-color: #2574a9;
   color: #fff;
   padding: 10px 20px;
}

I've also tried this with no success:

.THIS .uibutton.btn {
   background-color: #2574a9;
   color: #fff;
   padding: 10px 20px;
}

Answer 1

The classname which you've given is wrong. This is the correct styling.

.THIS .uiButton.btn{
   background-color: #2574a9;
   color: #fff;
   padding: 10px 20px;
}

You may also directly give .THIS .btn (There is space if there's an outer DOM element, otherwise you may avoid the spacing.)

Answer 2

It may be an issue of selectivity. Tag name selectors have the highest specificity. Now bear in mind that the THIS CSS class goes to all root level elements in your component. So let's say that you wrap the entirety of your component in a div, no need for any classes on it. The div will automatically get the THIS class. Now try using this selector to style the button: .THIS button.uibutton and it might have a better chance of overriding the built in styles.

(previously: I think it gives ui:button elements a class of ui-button, note the hyphen. Try again with that?)

Answer 3

I had something similar, in a lightning component. It was driving me crazy. I read a post (cant find it now) about css scoping, and needing to surround you html in a scoping div.

I hope someone else can chime in on the exact reasoning, but adding an empty wrapper around everything instantly applied the CSS correctly. I couldnt believe something so small was behind my frustrations.

Answer 4

Here's what works today. I the below with a Create Contact button.

The slds-button_brand class dictates the color of your button without having to modify the Style component.

Additional standard colors can be referenced from SLDS.

<ui:button aura:id="createContactButton" buttonTitle="Create Contact" class="slds-button slds-button_brand" label="Create Contact" press="{!c.createContact}"/>