Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Applying styles .step-wrapper and .step divs #33

Open
rminderhoud opened this issue May 27, 2019 · 2 comments
Open

Applying styles .step-wrapper and .step divs #33

rminderhoud opened this issue May 27, 2019 · 2 comments

Comments

@rminderhoud
Copy link

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.

@JaKXz
Copy link

JaKXz commented Oct 25, 2019

So I've been trying to deal with this as well, and discovered this line:

generateScopedName: 'rsw_[hash:base64:2]',

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

@movie4
Copy link

movie4 commented May 23, 2022

any updates?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants