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
Source: vercel/styled-jsx