+ Start a Discussion
Nick Ng 6Nick Ng 6 

Custom Classes adding to lightning components

I was wondering if it was possible to add classes to lightning components you add to your page, so I can add custom css to the elements.  Is this possible?
Best Answer chosen by Nick Ng 6
Ajay K DubediAjay K Dubedi
Hi Nick,

You can use by these ways.

Using inline CSS.

// Demo Component.cmp

<aura:component>
  <div style="background-color:black ; margin:12px">
    <p style="color:white">white Text with black Background [Inline CSS]</p>
    <p style="color:yellow">Yellow Text with black Background [Inline CSS]</p>  
  </div>
</aura:component>


//By create STYLE tab in component bundle.

//Demo Component.cmp

<aura:component >
  <!--here div is top level elements and <h1> and <p> is nested level elements-->  
   
   <div class="divCss">
      <h1>Hello Developers's</h1>
      <p>This is sample HTML Paragraph in a DIV elelment.</p>
   </div>
   
  <!--here <p> tag is top level elements-->
    <p>This is a sample HTML paragraph.<span>with a span element</span></p>  
</aura:component>


// Put this code to Demo Component.css tag.

/* For select ALL TOP level <p> element */
 
p.THIS {
    color: blue;
    font-weight: bold;
}
 
/* For select ALL TOP level <Div> element with class Name "divCss" */
 
.divCss.THIS {
    padding: 20px;
    background-color: yellow;
}
 
/* For select ALL Nested level H1 elements */
 
.THIS H1 {
    color: green;
    font-size: 22px;
}
 
/* For select ALL Nested level <p> element */
 
.THIS p {
    color: red;
    font-weight: lighter;
}

Please select as best answer if it helps you.

Thank You,
Ajay Dubedi
 

All Answers

Raj VakatiRaj Vakati
Yes .. You can add any standard or custom css to the component  .. 
Nick Ng 6Nick Ng 6
How would you do that?  I can't seem to find the class name or anything?
 
Ajay K DubediAjay K Dubedi
Hi Nick,

You can use by these ways.

Using inline CSS.

// Demo Component.cmp

<aura:component>
  <div style="background-color:black ; margin:12px">
    <p style="color:white">white Text with black Background [Inline CSS]</p>
    <p style="color:yellow">Yellow Text with black Background [Inline CSS]</p>  
  </div>
</aura:component>


//By create STYLE tab in component bundle.

//Demo Component.cmp

<aura:component >
  <!--here div is top level elements and <h1> and <p> is nested level elements-->  
   
   <div class="divCss">
      <h1>Hello Developers's</h1>
      <p>This is sample HTML Paragraph in a DIV elelment.</p>
   </div>
   
  <!--here <p> tag is top level elements-->
    <p>This is a sample HTML paragraph.<span>with a span element</span></p>  
</aura:component>


// Put this code to Demo Component.css tag.

/* For select ALL TOP level <p> element */
 
p.THIS {
    color: blue;
    font-weight: bold;
}
 
/* For select ALL TOP level <Div> element with class Name "divCss" */
 
.divCss.THIS {
    padding: 20px;
    background-color: yellow;
}
 
/* For select ALL Nested level H1 elements */
 
.THIS H1 {
    color: green;
    font-size: 22px;
}
 
/* For select ALL Nested level <p> element */
 
.THIS p {
    color: red;
    font-weight: lighter;
}

Please select as best answer if it helps you.

Thank You,
Ajay Dubedi
 
This was selected as the best answer