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

[codesyntax lang=”xml” container=”div” doclinks=”1″]

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

[/codesyntax]

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.

[codesyntax lang=”xml” container=”div” doclinks=”1″]

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

[/codesyntax]

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.

[codesyntax lang=”css” container=”div” doclinks=”1″]

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

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

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

[/codesyntax]

Use below code for the component

[codesyntax lang=”xml” container=”div” doclinks=”1″]

<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>

[/codesyntax]

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.

[codesyntax lang=”xml” container=”div” doclinks=”1″]

<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>

[/codesyntax]

Use the below CSS

[codesyntax lang=”css” container=”div” doclinks=”1″]

.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;
}

[/codesyntax]

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