I have fetched the sumValue ,sumValueColor, from a class to lwc js. and i have to set the sumValueColor to two CSS classes.i have done like the this.

js

@wire(getData, { iId: '$contactId' })
    GetData({data}){
        if (data) {
            this.sumValue= data.sumValue;
          this.template.querySelector('div.sumValueColor1').style.setProperty('--sumValueColor', data.sumValueColor);
            this.template.querySelector('div.sumValueColor2').style.setProperty('--sumValueColor', data.sumValueColor);
      
}
}

css

div.sumValueColor1 {
    color: var(--sumValueColor);
}
div.sumValueColor2 {
    color: var(--sumValueColor);
}

html

<template>
   <template if:true={hasChanges}>
    <div class="slds-grid slds-grid_align-center">
            <div class="primary-num-text-large"  >
            <div class="sumValueColor1" >{sumValue}</div>
            </div>
        </div>
  </template>
 <template if:false={hasChanges}>
    <div class="slds-grid slds-grid_align-center">
            <div class="primary-num-text-medium"  >
            <div class="sumValueColor2" >{sumValue}</div>
            </div>
        </div>
<template>

But this is not working ,the color is not reflecting.how to fix this? can someone help?

Thanks, Serah