6

I have a question regarding styling Lightning components. On several occasions lately, I have found myself having to opt for the use of a standard HTML tag styled with bootstrap on which I call core Javascript methods instead of the native Lightning ones. The reason for this is a lot of the native Lightning component styling doesn't look as good as the Bootstrap styling. I am wondering if there is a way to simply style a native Lightning component like <ui:inputSelect> to look like something like this instead of the native style that looks more bland and gray, at least on the desktop app.

I would like to keep the functionality of using cmp.get("v.options") to get the component options and use the functions mentioned here to populate the list dynamically using Lightning patterns, but I'm stuck on the styling aspect, providing that I don't reapply each individual bootstrap CSS property one-by-one.

Improve this question
7
  • Have you gone through the Lightning Components module in Trailhead? There's a section there on Defining Component Attributes where they nest multiple components. Perhaps going through that might give you some ideas on how to accomplish your desired goal without bloating your component. Everything I've seen always uses a separate Style Sheet for each Component Bundle. But, I'm also just getting started with learning.
    – crmprogdev
    Commented Jul 18, 2015 at 13:19
  • Thanks for the comment. Yeah, the problem is that the native Lightning components such as <ui:button> have so much default styles, it would take a long time to override the all. Currently, I am just having to use the default <button class="btn btn-default"></button> tags so that I can use Bootstrap styling. It just prevents me from using the native Lightning components.
    – Daniel Fuller
    Commented Aug 6, 2015 at 14:32
  • There's been a huge number of posts in the Developer Relations Blog with Lightning project examples that included a lot of code. I highly recommend you go there and run a search. You may find exactly what you're looking for. @PeterKnolle is also having a Lightning Live Coding Session this Sat at 8AM eastern.
    – crmprogdev
    Commented Aug 6, 2015 at 16:20
  • 1
    @sangram, thanks for the comment. In your example, you are mainly using native HTML elements on which you are applying your CSS. I was referring to applying an external CSS library like Bootstrap to native Lightning ui components like <ui:inputCheckbox> or <ui:button> that already have their own default styles.
    – Daniel Fuller
    Commented Aug 12, 2015 at 19:59
  • 2
    There's something called $A.util.addClass(), $A.util.removeClass(), and $A.util.toggleClass(). Override the platform css using rendered. Use on init event. Follow these links. developer.salesforce.com/docs/atlas.en-us.lightning.meta/… developer.salesforce.com/docs/atlas.en-us.lightning.meta/…
    – user477
    Commented Aug 14, 2015 at 6:07

1 Answer 1

Reset to default
4

I will recommend not to style it with bootstrap instead use lightning design system. So, that your component looks consistent with rest of the app. However, if you wan to use bootstrap use

<ltng:require styles="{!$Resource.resourceName}" />

or if you want to use multiple file then

styles="{!join(',', 
    $Resource.myStyles + '/stylesheetOne.css', 
    $Resource.myStyles + '/moreStyles.css')}"

Please refer to following article for more information.

Improve this answer
1
  • 2
    Yes I agree. When I created this post, Lightning Design System had not been released yet and Lightning itself wasn't GA.
    – Daniel Fuller
    Commented Dec 23, 2016 at 13:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .