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

Question

The same question as this, but for Progress instead of Toast. Extending the theme's Progress component does nothing, so I thought this component also uses another component, like how the Toast uses Alert, but I couldn't find anything about this. This doesn't work for Progress: (but it works for other components, like Button or Alert)

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

Answer 1

You need to specifically target filledTrack (or just track if you'd like to style the background of the progress bar), because <Progress> is a multipart component.

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