How can i make dynamically change color and font weight of text/numbers in LWC?

Question

I want to change the values of numbers dynamically depending on certain conditions.

When the number is less than 0, I want to change the number's color: red, and font-weight:bold.

{record.excessMh} will be the number.

I was supposed to make a function for the dynamic changing value in getDailyProdListDemo(), but I couldn't call it. I really don't know why... Please help. Thanks for all your answer :)

• HTML

 <template>
    <tr>
        <td style="background-color:white">Change</td>
        <template for:each={records} for:item="record" >
                                <td key={record.id} class={customCss}>
                                    <div class="change-color">
                                        {record.excessMh}
                                    </div>
                                </td>
                        </template>
    </tr>
</template>

• JS

  onClickHandler() {
        this.getDailyProdListDemo();

    }

    getDailyProdListDemo() {
        getDailyPrdList({ recordId: this.recordId, startDate: this.startDate, endDate: this.endDate })
            .then((result) => {
                const data = [...result];
                const dailyPrdList = new Array();
                data.forEach((item) => {
                    const obj = Object.assign({}, item);

                    const remndOpFtMh = obj.BM_DPM_OP_RcmndedNumbOfPpl__c === undefined ? 0 : obj.BM_DPM_OP_RcmndedNumbOfPpl__c;
                    const remndFtMh = obj.BM_DPM_RecommendedFT_MH__c === undefined ? 0 : obj.BM_DPM_RecommendedFT_MH__c;
                    const ptMh = obj.BM_DPM_PartTimeMH_Average__c === undefined ? 0 : obj.BM_DPM_PartTimeMH_Average__c;
                    const extMh = obj.BM_DPM_ExtraMH__c === undefined ? 0 : obj.BM_DPM_ExtraMH__c;
                    const addFtMh = obj.ExtraFT_Total2__c === undefined ? 0 : obj.ExtraFT_Total2__c;
                    const addPtMh = obj.ExtraPT_Total2__c === undefined ? 0 : obj.ExtraPT_Total2__c;
                    const totalRmnd = obj.TotalRmndWorkers__c === undefined ? 0 : obj.TotalRmndWorkers__c;
                    const totalMh = remndOpFtMh + remndFtMh + ptMh + extMh + addFtMh + addPtMh + totalRmnd;
                    obj.totalMh = totalMh;

                    const opScEw = obj.OP_Schedule_ExcessWorkers__c;
                    const scFt = obj.CL_ScheduleExcessFT__c;
                    const scPt = obj.CL_ScheduleExcessWorkersPT__c;

                    const excessMh = opScEw + scFt + scPt;
                    obj.excessMh = excessMh;
                    dailyPrdList.push(obj);                  
                });
                
                this.records = [...dailyPrdList];
                this.error = undefined;
                this.getDailyCrewSchedulesDemo();
                this.getCustomCss();

            }).catch((error) => {
                this.error = error;
                this.records = undefined;
                console.log('Errorrrrr', error)
            })

          
            // console.log('Retrieved', result)

    }



        getCustomCss(){{
            getDailyPrdList({ recordId: this.recordId})
                .then((result) => {
                    const data = [...result];
                    const dailyPrdList = new Array();
                    data.forEach((item) => {
                        const obj = Object.assign({}, item);
    
                        const opScEw = obj.OP_Schedule_ExcessWorkers__c;
                        const scFtt = obj.CL_ScheduleExcessFT__c;
                        const scPt = obj.CL_ScheduleExcessWorkersPT__c;
    
                        const excessMh = opScEw + scFt + scPt;
                        obj.excessMh = excessMh;
                        dailyPrdList.push(obj);                  
                    });
                    

                    this.records = [...dailyPrdList];
                    this.error = undefined;


                    if(this.excessMh < 0){
                        return this.template.querySelector('.change-color').className.add('red-color');
                    } else{
                        return this.template.querySelector('.change-color').className.add('black-color');
                    }
                    
    
                }).catch((error) => {
                    this.error = error;
                    this.records = undefined;
                    console.log('Errorrrrr', error)
                })

    
        }}
    
    

• css

.red-color{
    color: red;
    font-weight: bold;
}

.black-color{
    color: black;
}