Should be able to append CSS classes

[rikusen0335]

This issue is a:

• Feature request

Description

Currently you can add CSS styles with wrapStyle prop, but we need to add css through string like:

<Zoom className={classes}>
  <img something={something} />
<Zoom>

Because there's some cases to use CSS Modules or utility first css frameworks like Tailwind CSS.

[rpearce]

@rikusen0335 Thank you for your feature request idea contribution to the project!

There is another major rewrite underway that will change how the component is consumed, and it will allow you to do what you require with styling.

I don't know when version 5 will be available, and I will keep this issue open until it is resolved.

Thanks again.

[rikusen0335]

Thank you for answering! I am looking forward to it 🥇

[rpearce]

Update on v5 FYI: #274

[rpearce]

@rikusen0335 I'm working on things and am unsure how I want to go about this. At present, you can override/add on to the default styles, but passing a single className — now, as well as for the next version — raises some questions.

• What would you be looking to achieve that you couldn't by targeting .my-class [data-rmiz-wrap] { } in your CSS?
• Should there be a className prop be added to every element, including all of the modal ones? (This feels incorrect to me)

I know it's been a while, and thank you for your time.

---

Here's the latest update on the work being actively done! #274 (reply in thread)

[rikusen0335]

You probably need to override classes into every element, like if you making the lib, I mean like:

const Zoom = ({ baseClasses, secondClasses, src }) => {
  return (
    <div className={`base ${baseClasses}`}>
      <figure className={`second ${secondClasses}`}>
        <img src={src} />
      </figure>
    </div>
  )
}

So, because recent CSS-in-JS stuffs are bit difficult to use css selectors.

[rpearce]

That seems like potentially a lot of classes to accept and use; in the v5-dev branch code, I would need to accept 9 different class names to cover all the elements.

Don't all the CSS-in-JS provide options to break out of their modules? E.g.,

• https://github.com/css-modules/css-modules#exceptions
• https://emotion.sh/docs/nested
• https://emotion.sh/docs/globals

Using the example from https://emotion.sh/docs/nested, here's how you would target data-rmiz from the v5-dev branch:

const myTextWithNestedImg = css`
  color: purple;
  [data-rmiz] { /* some styles here */ }
`

Or going with the global approach from emotion:

<Global
  styles={css`
    [data-rmiz] { /* some styles here */ }
    [data-rmiz-content] { /* some styles here */ }
  `}
/>

[rikusen0335]

Ohh I didn't expect how that way can be done. That seems great, so I'd choose css selector way now.

[rpearce]

Thank you for asking your question and communicating in hopes of making this better! I've added you to the README's all contributors list:

[rikusen0335]

I even didn't anything xD
But thank you!

[rpearce]

You asked a question and thought through some ideas with the hopes of making the project better! That is a contribution ❤️