Aura Component Styling Simplified

Everyone can add a few style statements by carrying cool shades, a cool pair of shoes, or a fancy shirt, so do our Aura component likes styling too 🙂

How do you style them? It’s by using CSS.

You can declare CSS in the style resource of the component or you can create an external style sheet and add it into the component markup.

Let’s discuss them one by one.

Add CSS To An Aura Component Bundle:

Please open the MyAwesomeComponent which we have already created in the previous part.

Paste the following code in the component markup.

<aura:component>
    <aura:attribute name="welcome" type="String" default="Hey, Welcome to SalesforceBlue :)" />

    <lightning:card title="AwesomeAuraComponent" aura:id="card1">
        <p class="slds-p-horizontal_small" aura:id="p1">
            <p>{!v.welcome}</p>
        </p>

        <div class="block-quotation">
            Success is the sum of small efforts, repeated.
        </div>
    </lightning:card>

    <div class="block-quotation-large">
        Let your unique awesomeness and positive energy inspire confidence in others.
    </div>
</aura:component>	

In the above component markup, we have created two divs having two different CSS classes – block-quotation-large & block-quotation

Please click on the style resource button as shown in the below image and save the below code which follows.

.THIS .block-quotation {
    border: solid rgb(0, 132, 255) 3px;
    padding: 1.2rem;

}

.THIS.block-quotation-large {
    border: solid rgb(0, 132, 255) 3px;
    padding: 1.2rem;
    margin: 3rem;

}

In the above CSS declaration, we have added the class .block-quotation followed after a .THIS and .block-quotation-large followed after a .THIS but without any spaces in between them.

This is mandatory in Aura Component that is if you are adding CSS class in the style resources then it must be followed after .THIS

The top-level element should not have space after a .THIS so we have declared .THIS.block-quotation-large

.THIS .block-quotation is a descendant selector and it contains a space in between them. You can see that the div which has a class block-quotation is present inside the parent lighting-card component.

You will see the below output when you will preview the component.

Why do we have to declare .This in Aura Component Style?

It ensures encapsulation and prevents one component to override another component CSS.

.This is converted to namespacecomponentname at run time.

Let’s inspect the top-level div tag with the class block-quotation-large. You will see that it has the class name followed by the namespace – c and component name – MyAwesomeComponent.

Add External CSS To An Aura Component:

Before proceeding with this let’s clear out the style resource which we have created in the MyAwesomeComponent to ensure that we are referring to external CSS only.

Replace the following code in the style resource:

.THIS {
    
}

You can refer an external CSS by uploading it as a static resource and later using <ltng:require styles =”{!$Resource.resourceName}”></ltng:require> in the component markup.

You can use this external CSS for this example – externalCSS

Please copy the content from the above link and save it as externalCSS.css

Go to Set Up > Static Resource > Upload the external resource externalCSS.css

Let’s modify the component mark up with the following code:

<aura:component>

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

    <aura:attribute name="welcome" type="String" default="Hey, Welcome to SalesforceBlue :)" />

    <lightning:card title="AwesomeAuraComponent" aura:id="card1">
        <p class="slds-p-horizontal_small" aura:id="p1">
            <p>{!v.welcome}</p>
        </p>

        <div class="block-quotation">
            Success is the sum of small efforts, repeated.
        </div>
    </lightning:card>

    <div class="block-quotation-large">
        Let your unique awesomeness and positive energy inspire confidence in others.
    </div>
</aura:component>	

In the above component mark up we have used the ltng:require component by specifying the external CSS in the styles attribute.

If there is more than one external CSS to be used then you can add them in the styles attribute with comma-separated values.

The output of this approach will be similar to the one above as we have kept the same styling.

So by now, you have made your component look much cooler by adding styles into it 🙂

You can play around and add more CSS to this component.

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂