Activity Forums Salesforce® Discussions CSS Style for ui:button in Salesforce Lightning Component non rendering

  • CSS Style for ui:button in Salesforce Lightning Component non rendering

  • sushant

    Member
    January 30, 2017 at 2:55 pm

    Hi All,

    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;
    }

    Thanks

  • Kumar

    Member
    February 10, 2017 at 11:07 am

    Hi Sushant,

    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.)

    Hope this helps.

Viewing 1 - 2 of 2 posts

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos