We encounter a number of scenarios requiring dynamic styling in LWC component development. In this blog, we will learn about changing and setting classes dynamically from js.<\/p>\n\n\n\n
We all know that in order to write any custom style, we can add a css file in our LWC component named with the app name. Ex: If my component name is paginator then I can create a paginator.css file parallel to paginator.html and paginator.js.<\/p>\n\n\n\n
There can be various use cases; here, we will discuss two.<\/p>\n\n\n\n
In your app, you want to provide a setting for the admin to decide theme styling like background color, button colors, etc. Basis of its selection, UI has that change<\/p>\n\n\n\n
To achieve this, you can declare a property in your js file, and the basis of your setting can change the property’s value. That property can be used as a class. Ex :<\/p>\n\n\n\n
<template>\r\n <div class=\"{customClass}\">Salesforce Learning<\/div>\r\n<\/template>\r<\/code><\/pre>\n\n\n\n<\/span>SampleApp.css<\/span><\/h3>\n\n\n\n.redColor {\r\n color: red;\r\n}\r\n\r\n.greenColor {\r\n Color: green;\r\n}\r<\/code><\/pre>\n\n\n\n<\/span>sampleApp.js<\/span><\/h3>\n\n\n\nimport { LightningElement, api, track } from 'lwc';\r\n\r\n\/**\r\n * Show an item\r\n *\/\r\nexport default class SampleApp extends LightningElement {\r\n @track customclass = 'redColor'; \/\/ you can set this parameter basis of admin selection\r\n\r\n changeTheme() {\r\n this.customclass = 'greenColor';\r\n }\r\n}\r<\/code><\/pre>\n\n\n\n<\/span>Use case 2:<\/span><\/h2>\n\n\n\nIn your app, you want to add or remove styling from any element<\/p>\n\n\n\n
Let\u2019s say I have a div, and I want to add or remove a class from my div element.<\/p>\n\n\n\n
<\/span>sampleApp.html<\/span><\/h3>\n\n\n\n<template>\r\n <div class=\"redColor\" data-id=\"myDiv\">Salesforce Learning<\/div>\r\n <lightning-button label=\"Green\" onclick={changeGreen}><\/lightning-button>\r\n <lightning-button label=\"Default\" onclick={noColor}><\/lightning-button>\r\n<\/template>\r<\/code><\/pre>\n\n\n\n<\/span>sampleApp.css<\/span><\/h3>\n\n\n\n.redColor {\r\n color: red;\r\n}\r\n\r\n.greenBorder {\r\n border: 1px solid green;\r\n}\r<\/code><\/pre>\n\n\n\n<\/span>sampleApp.js<\/span><\/h3>\n\n\n\nimport { LightningElement, api, track } from 'lwc';\r\n\r\n\/**\r\n * Show an item\r\n *\/\r\nexport default class SampleApp extends LightningElement {\r\n noColor(){\r\n this.template.querySelector('[data-id=\"myDiv\"]').classList.remove('greenBorder');\r\n }\r\n changeGreen(){\r\n this.template.querySelector('[data-id=\"myDiv\"]').classList.add('greenBorder');\r\n }\r\n}\r<\/code><\/pre>\n\n\n\nIn this example, I have used basic JS to manipulate styling in my div element.<\/p>\n\n\n\n
Hope this example helps you to solve all your dynamic styling-related needs. If you need further assistance regarding a project of yours, then get in touch with our salesforce consulting<\/a> team. Our team consists of expert developers providing salesforce development services<\/a> for various salesforce products.<\/p>\n\n\n\nLearn More: How To Call Apex Method In Lightning Web Components?<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"We encounter a number of scenarios requiring dynamic styling in LWC component development. In this blog, we will learn about changing and setting classes dynamically from js. We all know that in order to write any custom style, we can add a css file in our LWC component named with the app name. Ex: If<\/p>\n","protected":false},"author":39,"featured_media":40486,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[87],"tags":[],"class_list":{"0":"post-2981","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-salesforce-development"},"modified_by":"Marketing EmizenTech","featured_image_src":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/06\/Visualforce-Email-Templates-In-Salesforce-1-600x400.jpg","featured_image_src_square":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/06\/Visualforce-Email-Templates-In-Salesforce-1-600x408.jpg","author_info":{"display_name":"Virendra Sharma","author_link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/author\/salesforce"},"_links":{"self":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/2981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/comments?post=2981"}],"version-history":[{"count":0,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/2981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media\/40486"}],"wp:attachment":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media?parent=2981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/categories?post=2981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/tags?post=2981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}