一覧画面で数値の範囲によってセルの色を変えたい

// 数値Cの値が10,000未満であれば背景を赤、20,000〜30,000未満であれば黄色、30,000以上であれば青に変更します。背景色の指定は、事前に設定したスタイルを使用します。
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';
}

/* 合計が10000円未満 */
.grid td.cell-blue {
    background-color: blue;
    color: white;
}
/* 合計が10000円以上、30000円未満 */
.grid td.cell-yellow {
    background-color: yellow;
    color: black;
}
/* 合計が30000円以上 */
.grid td.cell-red {
    background-color: red;
    color: black;
}

/* 合計が10000円未満 */
.cell-blue {
    background-color: blue;
    color: white;
}
/* 合計が10000円以上、30000円未満 */
.cell-yellow {
    background-color: yellow;
    color: black;
}
/* 合計が30000円以上 */
.cell-red {
    background-color: red;
    color: black;
}