Add/Remove CSS Class in Lightning Web Components Salesforce CRM

In this Salesforce Lightning tutorial let us understand how to Add/Remove CSS Class in Lightning Web Components aka LWC.

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,

  .box { border : 2px solid red; }

  .box-color { background-color : green}

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

on clicking addCSS button

on clicking removeCSS button

How to Achieve this using AURA?

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

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

  $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

<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

.THIS.box-border {
    border:2px solid red;
}

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

Javascript controller

{
    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

<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

.box-border {
    border:2px solid red;
}

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

Javascript

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