如何在反應中使用 function 設置背景顏色？

Question

所以基本上我有一個 div，我需要根據值應用 3 個可能的 colors 中的 1 個，從 0 到 29 顏色是紅色，從 30 到 69 顏色是黃色，70 到 100 顏色是綠色，我我現在正在做的是創建一個 function，它基於值應用一種樣式或另一種樣式，使用 object，如下所示：

const useStyles = {
  bar: {
    low: {
      backgroundColor: "#f44336"
    },
    ...
  }
}

const handleBackgroundColor = (valueInPercent: Number) => {
    if (valueInPercent < 30) {
        return useStyles.bar.low;
    } else if (valueInPercent >= 30 && valueInPercent <= 70) {
        return useStyles.bar.medium;
    }
    return useStyles.bar.high;
}

<div 
  style={ 
    height: "75px", width: '75px', 
    backgroundColor: handleBackgroundColor(valueInPercent) }}
/>

但我收到此錯誤：

輸入 '{ backgroundColor: string; }' 不可分配給類型 'BackgroundColor | 不明確的'。

有人知道如何解決這個問題或者有沒有辦法為此使用三元運算符？

我解決了它刪除 object 符號，並像這樣保留它：

bar: {
    low: "#f44336",
    medium: "#efbb5aa3",
    high: "#088208a3"
}

Answer 1

我通過將bar的聲明更改為此來解決它：

bar: {
    low: "#f44336",
    medium: "#efbb5aa3",
    high: "#088208a3"
}