如何将渐变添加到 Chakra ui Progress？

【问题标题】：How to add the gradient to Chakra ui Progress?如何将渐变添加到 Chakra ui Progress？
【发布时间】：2021-01-06 04:03:58
【问题描述】：

我正在尝试将渐变设置为 Chakra UI 的 Progress 组件，但它不支持背景图像更改。知道如何实现这一点，甚至有可能吗？

【问题讨论】：

欢迎来到 SO - 请改进您的问题 - How do I ask good questions - 谢谢

标签： chakra chakra-ui

【解决方案1】：

我最近遇到了这个问题，并使用 sx 属性为进度条设置了实际的 div 样式。

<Progress
  height="24px"
  borderRadius="2xl"
  value={60}
  sx={{
    '& > div': {
      background: 'linear-gradient(90deg, rgba(43,108,176,1) 10%, rgba(66,153,225,1) 90%)',
    },
  }}
/>

【讨论】：

【解决方案2】：

<Progress
   bgGradient="linear(gray.300,yellow.400,pink.200)"
/>

【讨论】：