CODEWITHSUNDEEP
reactjschakra-ui
tschonti
tschonti

Reputation: 43

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

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

Upvotes: 2

Views: 8674

Answers (1)

Caleb Denio
Caleb Denio

Reputation: 1675

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

Upvotes: 4

Related Questions