Classname not compiled/passed-through for wrapper components

Author: JohnRoseDevCreated Mar 20, 2021Updated Aug 18, 2024

Do you want to request a feature or report a bug?

Not sure if bug or feature

What is the current behavior?

When using a native div element like <div className='bla' /> things work as expected and a "jsx-1234 bla" class name is generated, however, if set to a wrapper component like <Container className='bla' />, which under the hood passes className to a div, the classname is not compiled but simply stays "bla" on the div element, consequently the styles are not applied.

What is the expected behavior?

I would not expect styled-jsx to be limited to native elements since building wrappers and abstractions is a very common pattern in react. I would think the "jsx-1234" should be passed down to the div element inside the wrapper component.

Environment (include versions)

  • Browser: Latest Chrome
  • styled-jsx (version): 3.4.4

Did this work in previous versions?

Not sure