Toggle Side Panel
Close search

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

Tagged: , , ,

  • Salesforce® Discussions

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

    Posted by sushant on 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 replied 8 years, 10 months ago 2 Members · 1 Reply
  • 1 Reply

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

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos