Open earnest1997 opened 4 years ago
I'm also experiencing this issue, however, the classes get generated when there is whitespace after the styleName attribute.
This JSX code...
<ul className="justify-content-center" styleName="pagination">
<li styleName={`page-item${isFirstPage ? " disabled" : ""}`}>
<a styleName="page-link" href={`${basePath}/1`} aria-label="First">
<span aria-hidden="true">«</span>
<span className="sr-only">First</span>
</a>
</li>
</ul>
... produces this DOM structure.
<ul class="justify-content-center ">
<li class="">
<a class="" href="/blog/posts/1" aria-label="First">
<span aria-hidden="true">«</span>
<span class="sr-only">First</span>
</a>
</li>
</ul>
However, when I put a space after the first styleName
attribute only...
<ul className="justify-content-center" styleName="pagination" >{/* Note the space before the closing angle bracket*/}
<li styleName={`page-item${isFirstPage ? " disabled" : ""}`}>
<a styleName="page-link" href={`${basePath}/1`} aria-label="First">
<span aria-hidden="true">«</span>
<span className="sr-only">First</span>
</a>
</li>
</ul>
all styleName
s generate their corresponding className
s.
<ul class="justify-content-center pagination___3ieNK">
<li class="page-item___2eMHw disabled___2y7aB">
<a class="page-link___t-Mvf" href="/blog/posts/1" aria-label="First">
<span aria-hidden="true">«</span>
<span class="sr-only">First</span>
</a>
</li>
</ul>
In another instance, the styleName
attribute was not able to be converted over because there wasn't a space before a self-closing <img>
tag. (i.e. <img src="..."/>
vs. <img src="..." />
) Adding the space before self-closing the tag enabled the styleName
to generate the className
.
Edit: A temporary workaround for the issue I'm having is to position the styleName
attribute such that it isn't the last one in the DOM element. This ensures that there is a space after the attribute. This will not work if the styleName
is the only attribute in the element.
my css file:
component
generated dom like this