Style Your Lightning Component – SLDS

Style Your Lightning Component – SLDS

In this post, we will see how we can change the look and feel of our lightning component with the help of slds and also with our external CSS in the CSS component of the lightning bundle.

Output

1 – Create the lightning component and name it “StyleComponent

File -> New -> Lightning Component

2 – Copy and paste the below code between the aura:component tags

<div> I am red. </div>
<div> I am yellow. </div>
<div> I am blue. </div>

Now, if you see the preview then the output will look like below

3 – As we have not added any CSS, the output is not looking good. Let’s add slds on the app. Copy and paste the below code.

<aura:application extends="force:slds" >
    <c:StyleComponent />
</aura:application>

 

After saving the application, the preview will automatically be refreshed and you can see the difference between the new and old output.

Whenever you will add extends=”force:slds” line into the lightning application it will change the look and feel of the output.

4 – Now, let’s add some background CSS for the div tag. Open the component and click on style link from the right panel and replace the code with the below CSS.

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

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

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

 

Use below code for the component

<aura:component >
    Hello Lightning!!<br/>
    Checkout the Style in Div
    <div class="red"> I am red. </div>
    <div class="yellow"> I am yellow. </div>
    <div class="blue"> I am blue. </div>
</aura:component>

 

Now, refresh the application you will see the output.

Note: – In style component of lightning bundle we can only use dot notation means we can only use class.

As you can see that there is no margin from the left and from the top. let’s add the CSS for that. Before we add CSS part wrap the whole content and put into the single div tag the outer one.

<aura:component >
    <div class="div"> <!-- to put the margin from left and right -->
        Hello Lightning!!<br/>
        Checkout the Style in Div
        <div class="red"> I am red. </div>
        <div class="yellow"> I am yellow. </div>
        <div class="blue"> I am blue. </div>
    </div>
</aura:component>

 

Use the below CSS

.THIS.div{
    margin-left: 30px;
    margin-top: 20px;
}
.THIS .red {
    background-color: red;
    width: 250px;
}

.THIS .blue {
    background-color: blue;
    width: 250px;
}

.THIS .yellow {
    background-color: yellow;
    width: 250px;
}

To see the latest output refresh the application and you will see the difference.

If you have any query/suggestion, please come up in the comment section with.

Sharing is Caring 🙂 😉

Resource: –

SLDS Document

 

AMIT SINGH

My name is Amit Singh. I am a Certified Advanced Salesforce Developer. I am 5X salesforce certified professional @PureSoftware Ltd. I love to solve the queries in Salesforce Success Community and Developer forum. I am in love with Salesforce because of its continuous improvement. Inject trailhead into your blood and you will be a salesforce champion

leave a comment

Create Account



Log In Your Account