Another Salesforce blog!!!

Salesforce, Apex

Dynamic CSS in LWC

<template>
    <lightning-card title="Dynamic CSS">
        <div class="slds-var-m-around_medium">
            <lightning-input type="number" value={percent} label="Percentage" 
            onkeyup={changeHandler}></lightning-input>
            <div style={percentage} class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
              some message!!!
            </div>
        </div>
    </lightning-card>
</template>
import { LightningElement } from 'lwc';

export default class DynamicCss extends LightningElement {
    percent = 10
    changeHandler(event){
        this.percent = event.target.value
    }
   get percentage(){
        return `width:${this.percent}%`
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *