So I created a custom self-registration lightning component based off a standard component by using:


Once I did that, my formatting for the custom component broke despite only adding one line of code to the component. The style class for some reason changes from "branded" to "neutral" and "uiButton--none" to "uiButton--default"

class="slds-button slds-button--brand uiButton--none uiButton" 
data-aura-class="uiButton--none uiButton"/>

class="slds-button slds-button--neutral sfdc_button uiButton--default uiButton"
data-aura-class="uiButton--default uiButton/"

Any ideas how I can override the CSS, where is the "uiButton--default" and "neutral " coming from?

custom vs standard

  • have you tried re-styling it in the custom component style sheet? – glls Mar 12 '18 at 21:51
  • I’m not sure how to use Style Classes in the CSS – tjcinnamon Mar 12 '18 at 21:52
  • the HTML for your "broken" button shouldnt work, im guessing you did a typo, but as is it shouldnt even render. – glls Mar 12 '18 at 22:00
  • 1
    any reason why you are not using a lighting:button in your component? (or have you tried using one and get the same behavior?) – glls Mar 12 '18 at 22:02
  • I was attempting to make it more readable. Something could have not translated properly. I edited in the browser console and was able to make the proper change by editing the html – tjcinnamon Mar 13 '18 at 0:08

As stated in my earlier comment, the markup you provided for the "Broken" Button seems incomplete, however, I suggest you use a lightning:button component which has the advantage of having SLDS embeded within it when it is rendered.

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