Dynamic CSS in LWC

 

dynamicCss.html

  <template>

<lightning-card title="Dynamic CSS">

<div class="slds-var-m-around_medium">

<lightning-input type="number" value={currentVal} label="Percentage"

onkeyup={changeHandler}></lightning-input>

<div style={show} class="slds-notify slds-notify_alert

slds-theme_alert-texture slds-theme_error" role="alert">

Hey!!!

</div>

</div>

</lightning-card>

</template>

dynamicCss.js

import { LightningElement } from 'lwc';

export default class DynamicCss extends LightningElement {

currentVal = 10;

changeHandler(event){

this.currentVal = event.target.value;

}

get show(){

return `width:${this.currentVal}%`;

}

}