如何根据值更改<td>元素的颜色

我目前正在尝试根据值是正还是负来更改表格中元素的颜色，目前这是我所拥有的，但是它无法正常工作，并且是n ^ 2，我觉得效率很低：

export const ActiveStockList = () => {
  const store = useStockListStore();

  var x = document.getElementsByClassName("ColorTest");
  for (var i = 0; i < x.length; i++) {
    for (var j = 0; j < x[i].length; j++) {
      if (x[i].charAt(j) != "-") {
        x[i].style.Color = "green";
      } else {
        x[i].style.Color = "red";
      }
    }
  }

  return useObserver(() =>
    store.stocks.map((stock) => (
      <tr>
        <td className="justify-content-center">
          <a href={"/stocks/" + stock.symbol}>{stock.symbol}</a>
        </td>
        <td>{+stock.latestVolume}</td>
        <td className="ColorTest">
          {(+stock.changePercent * 100).toFixed(2)}%
        </td>
        <td className="ColorTest">$ {+stock.change}</td>
        <td>$ {+stock.latestPrice}</td>
        <td className="ColorTest">{(+stock.ytdChange * 100).toFixed(2)}%</td>
        <td>Buy</td>
        <td>10,023,000</td>
        <td>89.23</td>
        <td>140,000</td>
      </tr>
    ))
  );
};

将三个元素更改为绿色或红色的最佳方法是什么，具体取决于它们的值是大于0还是小于0？谢谢！