Kishore
Kishore I am a Salesforce developer and a so-called blogger at SalesforceLwc.in. I love learning and sharing. SalesforceLWC aims to share relevant knowledge, examples and scenarios for understanding Salesforce Lightning Web Components and AURA.

Add/Remove CSS Class in Lightning Web Components Salesforce CRM


Add/Remove CSS Class in Lightning Web Components Salesforce CRM

What is a CSS Class?

The CSS class is used to style an element. Class is reusable and can be used for n number of elements. You declare a CSS class by using a dot(.) followed by the class name which is followed by the properties that you assign to that CSS class.

.class-name { property : name }

eg: .box {background-color : red }

Now that we know what is CSS class lets know more about where they are used and why we use them?

Where to use a CSS class?

CSS classes can be used on any HTML tag/selector. Multiple selectors can have same CSS class, which makes it re-usable. For example,

Style me using CSS
1
  .box { border : 2px solid red; }
1
  .box-color { background-color : green}
Style me using CSS


Scenario

Let’s take a scenario of how to add and remove CSS classes in Salesforce AURA and LWC

Consider a box with a red border as shown above. Now, on clicking addCSS button having red border the box color should change to green and on clicking removeCSS button it has to go the initial stage.

Initial

I am a box


on clicking addCSS button

I am a box


on clicking removeCSS button

I am a box


How to Achieve this using AURA?

In AURA, to add and remove CSS style classes we use the following util functions.

1
  $A.util.addClass(targetComponent, 'class-name');
1
  $A.util.removeClass(targetComponent, 'class-name');

We provide two inputs to the util functions, one is the target component/tag/selector on which the styles have to be applied, other is CSS style class name. We have to do nothing other than that, everything else is handled by the AURA framework. Below is the whole implementation.

Component

1
2
3
4
5
6
<aura:component>
    <div class="box-border" aura:id="box">I am a box</div><br />
    
    <lightning:button onclick="{!c.addCSS}" label="Add CSS" />
    <lightning:button onclick="{!c.removeCSS}" label="Remove CSS" />
</aura:component>

CSS

1
2
3
4
5
6
7
.THIS.box-border {
    border:2px solid red;
}

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

Javascript controller

1
2
3
4
5
6
7
8
9
10
11
{
    addCSS: function(component, event) {
        var boxDiv = component.find('box');
        $A.util.addClass(boxDiv, 'box-color');
    },
    
    removeCSS: function(component, event) {
        var boxDiv = component.find('box');
        $A.util.removeClass(boxDiv, 'box-color');
    }
}

How to Achieve this using LWC?

We will implement add and remove CSS style classes in LWC using decorators. This can be handled directly without any util functions as you have seen in AURA. There are other ways as well but are blocked by Lightning Locker Service and comparatively this method easy to implement.

HTML

1
2
3
4
5
6
<template>
    <div class={box}>I am a box</div>
    
    <lightning-button onclick={addCSS} label="Add CSS"></lightning-button>
    <lightning-button onclick={removeCSS} label="Remove CSS"></lightning-button>
</template>

CSS

1
2
3
4
5
6
7
.box-border {
    border:2px solid red;
}

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

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { LightningElement, track } from 'lwc';

export default class AccountListEdit extends LightningElement {

 @track box = 'box-border';
    
    addCSS() {
     this.box = 'box-border box-color';
    }
    
    removeCSS() {
     this.box = 'box-border';
    }
}

Icons made by itim2101 from www.flaticon.com