如何在反应中使用 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"
}