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

user_10719279 0
Viewed 2666

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'
      }
    }
  }
})
chakra-ui reactjs
1 Answers

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'
        }
      }
    }
  }
})
user_109870850
Related