HOW TO ADD CSS STYLE TO SALESFORCE LIGHTNING COMPONENT ?

How To Add CSS Styling To Your Lightning Component ? salesforcekid


























CSS Styling To Your Lightning Component






To add styling to your salesforce lightning component you just have to add CSS styling in STYLE section available on the right-hand side of a developer console.
                                       style in developer console

Now let's create lightning component first and then we'll add style to it.
COMPONENT    HelloStyle.cmp


<aura:component >
<div> Hello HTML</div>


     <h2>Check the style in this list</h2>


       <ul>


         <li >I am red</li>


         <li > I am blue</li>


         <li > I am green</li>


       </ul>

</aura:component>

  • Now we'll add styling to it in STYLE section.
STYLE    HelloStyle.css



.THIS {
           background-color:grey;
          }

.THIS .red{
                background-color:red;
               }

.THIS .green{
                   background-color:green;
                  }

.THIS .blue{
                 background-color:blue;
                }   



  • Let's break down above code in 4 different sections to understand it. 
        .THIS {
                  background-color:grey;
                 }

  • This above first section will define background colour as grey for all text inside the component.
       .THIS .red{
                        background-color:red;
                      }
  • This above second section will define background colour as red for .red CSS class. Which means whenever we want text background colour as red then we will use this class.
  • Similarly for green and blue background colour, whenever we want to use a background colour as green or blue we will just call .green or .blue class inside HTML tag.
  • To learn more basics about HTML and CSS on Link.
  • Now let's add our CSS to a lightning component which we have created above 

COMPONENT    HelloStyle.cmp


<aura:component >


<div Hello HTML </div>


           <h2>Check the style in this list</h2>


             <ul>


                <li class="red">I am red</li>


                <li class="blue"I am blue</li>


                <li class ="green"I am green</li>


            </ul>

</aura:component>


  • In this way, we'll add our CSS style class inside HTML tags.
  • Now let's see a preview of the above lightning component by adding it inside the lightning application.
APPLICATION    HelloStyleApp.app


<aura:application >


    <c:HelloStyle />


</aura:application>



OUTPUT  



lightning component output


ALTERNATIVE WAY 

  • You can also use existing styling from Static Resource. For that, we just have to upload your styling or bootstrap file in Static Resource and refer it inside a lightning component by using the following tag
©Navigation 

Setup -> Static Resources -> New (upload your file here)

  • To refer uploaded file we will add below code inside a lightning component 

          <ltng : require style= "/resource/filename"/>
            <div class="StyleNameFromFile">
              Hello Salesforce Kid
           <div/>


    • The above code will use class StyleNameFromFile from filename file which provides style to Hello Salesforce Kid.

    WOHOOO......YOU HAVE JUST ADDED STYLE IN YOUR LIGHTNING COMPONENT.
    If you like this salesforcekid learning platform please let me know in the Comment section...Also, Share with your salesforce folks wish you 
    Happy learning ☁️⚡️ (Learn. Help. Share.)


    << PREVIOUS                                                        NEXT >>                                        
    HOW TO ADD CSS STYLE TO SALESFORCE LIGHTNING COMPONENT ? HOW TO ADD CSS STYLE TO SALESFORCE LIGHTNING COMPONENT ? Reviewed by on Rating: 5

    5 comments:

    1. Hey your blogs are really helpful. I’m learning through this and it’s very easy to understand. Thanks for sharing such stuff. Please keep posting.

      ReplyDelete
    2. Be the precise blog if you have wants to learn about this topic. You comprehend considerably its nearly onerous to argue to you (not that I personally would needHaHa). You undoubtedly put a new spin for a topic thats been discussing for some time. Nice stuff, simply nice! website designer nyc

      ReplyDelete
    3. Considerably, the particular post is truly the greatest with this deserving subject. To be sure together with your results and also can easily thirstily look forward to Your own potential improvements. Simply just declaring thank you will, no doubt not simply just be sufficient, for your wonderful quality within your writing. I will immediately grab your rss to remain up to date with any kind of updates. Real perform as well as much success inside your company dealings! web design in new york

      ReplyDelete
    4. You produced some decent points there. I looked online for your problem and located most people will go together with with the website. branding firms san francisco

      ReplyDelete
    5. Glad to be one of many visitants on this awful web site : D. sf design agency

      ReplyDelete

    HELP !! SHARE !! SUGGEST !!

    Powered by Blogger.