How to change the cell color depending on the range of numerical value ​​in the Screen Index

// If the value of number C is less than 10,000, the background will be changed to red, if it is between 20,000 and 30,000, the background will be changed to yellow, and if it is 30,000 or more, the background will be changed to blue. The background color will be specified using a style that has been set in advance.
const total = model.NumC;
if (total < 10000) {
    columns.NumC.ExtendedCellCss = 'cell-blue';
} else if (total >= 10000 && total < 30000) {
    columns.NumC.ExtendedCellCss = 'cell-yellow';
} else if (total >= 30000) {
    columns.NumC.ExtendedCellCss = 'cell-red';
}

/* Total is less than 10,000 JPY */
.grid td.cell-blue {
    background-color: blue;
    color: white;
}
/* Total is 10,000 JPY or more, but less than 30,000 JPY */
.grid td.cell-yellow {
    background-color: yellow;
    color: black;
}
/* Total is over 30,000 JPY */
.grid td.cell-red {
    background-color: red;
    color: black;
}

/* Total is less than 10,000 JPY */
.cell-blue {
    background-color: blue;
    color: white;
}
/* Total is 10,000 JPY or more, but less than 30,000 JPY */
.cell-yellow {
    background-color: yellow;
    color: black;
}
/* Total is over 30,000 JPY */
.cell-red {
    background-color: red;
    color: black;
}