react-step-wizard
react-step-wizard copied to clipboard
Applying styles `.step-wrapper` and `.step` divs
Hi!
It seems there's no clean way to apply styles to the inner divs, especially since webpack will mangle the class names (this is a non-issue for the parent div since it accepts a className
prop).
<div class="PublishWizard_wizard-content__3Ovvw">
<div class="rsw_2Y">
<div class="rsw_2f rsw_3G"></div>
</dv>
</div>
I have to work around the fact that I don't have the class names by doing something like this in my CSS.
#wizard > div,
#wizard > div > div {
height: 100%; /* example */
}
I'm not sure how this could be solved but seems like a small paper-cut for full control. I'm also not that familiar with webpack so I might be missing something completely obvious here.
So I've been trying to deal with this as well, and discovered this line:
https://github.com/jcmcneal/react-step-wizard/blob/f9243d5697521459eb7609408ba701ac2e3abdb0/rollup.config.js#L42
@jcmcneal Is it possible to guarantee at least the "active" classname, so I can write a cleaner selector (given my container className is step-wizard-container
) like:
.step-wizard-container :not(.active) {
overflow: hidden;
/* etc */
}
any updates?