CSS in Lightning

Introduction

CSS in aura components works very similarly to CSS in visualforce pages. It follows the general rules of CSS like using classes, applying CSS by element id and inline styling.

The difference is that we can not explicitly use a <style> tag in the aura component markup. If you try and do so it will throw an error and not let you save. So we need to use the ‘style’ component bundle to apply custom css.

The ‘.THIS’ keyword

We can create a style file for our aura component by clicking the ‘create’ link on the style part of the bundle. This creates a css file for the aura component :

We see a default ‘.THIS’ keyword in the default CSS file that was created. The ‘.THIS’ keyword is used by the framework to uniquely identify each aura component. At runtime when the component is loaded into the browser, the .THIS keyword is replaced with the component name.

So we need to use this .THIS keyword with all the custom css and selectors that we use in the style file for our component. For example :

.THIS {
    
    background-color: black;
}

This will turn the background color black for all the elements in the aura component. Now, we can use this in conjunction with the standard CSS selectors to apply CSS to our component.

Another example :

Here is our markup,

<aura:component>
    
  <div class="class1">My Div 1</div>
  <div class="class2">My Div 2</div>
  <div class="class3">My Div 3</div>
    
</aura:component>

And we can apply custom css with classes to this component like this :

.THIS.class1{
	background-color: red;
}
.THIS.class2{
	background-color: green;
}
.THIS.class3{
	background-color: blue;
}

This will lead to this output :

My Div – 1

My Div – 2

My Div – 3

Similarly we can also apply CSS by id or inline as well. If we modify the markup to this :

<aura:component>
    
  <div class="class1" id="div1" style="background-color: purple;">My Div 1</div>
  <div class="class2" id="div2">My Div 2</div>
  <div class="class3" id="div3">My Div 3</div>
    
</aura:component>

Then modify the CSS to this :

.THIS.class1{
	background-color: red;
}
.THIS.class2{
	background-color: green;
}
.THIS.class3{
	background-color: blue;
}
.THIS#div2{
    background-color: yellow;
}

Then the component outputs :

My Div – 1

My Div – 2

My Div – 3

We can see that since we are applying the purple color to the first div via the inline CSS, it overrides the background which was applied by the ‘class1’ to the css. Same thing with the background color for the second div, the CSS applied by the ‘#div2’ id of the div overrides the CSS applied to it by the ‘class2’ CSS class.

This means that the CSS hierarchy goes like this : Inline CSS > CSS by ID > CSS by class.

So any CSS applied by a class is overridden by any CSS applied by the element Id, and the inline CSS overrides all the CSS.

NOTE: The CSS override only happens if we have conflicting CSS properties, that is, we applied the same property ‘background-color’ to the element by class,id and inline. But let’s say that we apply different properties like ‘font color’ by the class and the ‘background color’ by id, both CSS properties are applied to the element. For example :

Markup :

<aura:component>
    
  <div class="class2" id="div2">My Div 2</div>
    
</aura:component>

CSS :

.THIS.class2{
    color: red;
}
.THIS#div2{
    background-color: yellow;
}

This applies the font color to ‘red’ via a css class and background color to yellow via the div id. The output is this :

My Div

Both the CSS properties are applied to the div element!

Exporting External CSS Files

We can also export external CSS files to load custom CSS to your aura component externally. But like visualforce, we can not load external CSS via a CDN url directly. For example you could do something like this in a visualforce page :

<link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/loadCSS/3.1.0/loadCSS.js”>

This would load the CSS into the visualforce page from the URL. This is not supported in aura components. In order to import external CSS from aura components, we need to store the CSS file in a static resource first. After uploading the CSS file to a static resource we can refer it in our aura component with the <ltng:require> tag.

<ltng:require styles=”{! $Resource.staticResourceFileName}”/>

External CSS File :

/*external css file with .css file extension */
 .custom-class{
     font-size:20px;
     color:red;
     background-color:black;
}

We save this file as a ‘.css’ file and upload it to a static resource.

We use it in our custom component like this :

<aura:component>
    
  <ltng:require styles="{!$Resource.ExternalCSS}"/>
    
  <div class="custom-class">My Div</div>
    
</aura:component>

Here, this ‘custom-class’ class is being loaded into the component from an external css file. This is the output from the component :

My Div

Salesforce Menu

Salesforce Lightning

Salesforce LWC

CSS in Lightning