react-step-wizard icon indicating copy to clipboard operation
react-step-wizard copied to clipboard

Applying styles `.step-wrapper` and `.step` divs

Open rminderhoud opened this issue 5 years ago • 2 comments

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.

rminderhoud avatar May 27 '19 15:05 rminderhoud

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 */
}

JaKXz avatar Oct 25 '19 03:10 JaKXz

any updates?

movie4 avatar May 23 '22 12:05 movie4