如何将渐变添加到查克拉UI进度

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

Answer 2

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