如何更改 Chakra UI Progress 组件的背景颜色？

Question

与 this 相同的问题，但针对 Progress 而不是 Toast。扩展主题的 Progress 组件没有任何作用，所以我认为该组件还使用了另一个组件，例如 Toast 如何使用 Alert，但我找不到任何相关信息。这不适用于 Progress:（但它适用于其他组件，如 Button 或 Alert）

const customTheme = extendTheme({
  components: {
    Progress: {
      baseStyle: {
        bg: '#d4f3e7'
      }
    }
  }
})

Answer 1

您需要专门针对 filledTrack（如果您想设置进度条背景的样式，则只需 track），因为 <Progress> 是 multipart component.

const customTheme = extendTheme({
  components: {
    Progress: {
      baseStyle: {
        filledTrack: {
          bg: '#d4f3e7'
        }
      }
    }
  }
})

如何更改 Chakra UI Progress 组件的背景颜色？

How to change the background color of the Chakra UI Progress component?

reactjs

chakra-ui