react-stepper
react-stepper copied to clipboard
Line Height Issues
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:
- 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;
}
}