jeanverster / chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI
https://chakra-ui-steps.vercel.app
390 stars 44 forks source link

Styling active label text #50

Closed siminn-asdisj closed 2 years ago

siminn-asdisj commented 2 years ago

Is it possible to change the color and font weight of the default numerical indicator that is active?

I'm trying to go from this:

Screenshot 2022-02-21 at 12 21 30

To this:

Screenshot 2022-02-21 at 12 19 15

I've tried styling it with

label: {
  _activeStep: {
    fontWeight: 700,
    color: #000000,
  }
}

(and also _active instead of _activeStep) but that isn't working.

jeanverster commented 2 years ago

Hey @siminn-asdisj you should be able to achieve this by styling the span element inside stepIconContainer:

stepIconContainer: {
  ...YourStyles,
  '& span': {
      fontWeight: '900',
   },
}