mu29/react-stepper

Line Height Issues

Opened this issue · 2 comments

The line height of the number inside the circle is not always calculated correctly as some fonts have weird spaces. Can we get a line height offset prop that allows us to easily correct this for font's that have weird padding?

+1

If this is still a problem to anyone, here's how I solved it:

  1. Wrap your stepper in a div with an specific class
<div className='stepper-container'>
    <Stepper steps={steps} activeStep={activeStep} />
</div>

apply this css to your code:

.stepper-container div div div div a {
 line-height: ::your line height here:: !important;
}

.stepper-container div div div div span {
 line-height: ::your line height here:: !important;
}

or if you're using scss:

.stepper-container div div div div {
  a {
 line-height: ::your line height here:: !important;
  }
  span {
 line-height: ::your line height here:: !important;
  }
}