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

Question

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

Answer 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%)',
    },
  }}
/>