How can I style the <span> that wraps the individual skeleton element

[markcnunes]

I see the skeleton can be styled as <Skeleton style={...} />, <Skeleton /* props such as width */ /> or const StyledSkeleton = styled(Skeleton) but all these

<span aria-live="polite" aria-busy="true"> <-- I need to add `width: 100%;    height: 100%;` to this span
  <span class="react-loading-skeleton">&zwnj;</span>
  <br>
</span>

All these approaches are only styling the <span class="react-loading-skeleton"> but how can I target the <span aria-live="polite" aria-busy="true">? Is containerClassName meant for this? If yes, is there another approach? I am using styled-components and it feels a bit counterintuitive that I need to use a parent to target the containerClassName to be able to style this span.

[srmagura]

containerClassName is the intended way to style the <span aria-live="polite" aria-busy="true">.

In Emotion, there is a ClassNames component for this exact use case. Can you check the styled-components documentation to see if they have something similar?

[markcnunes]

Thanks for the quick answer, @srmagura. Interesting, I didn't know Emotion supported it, unfortunately, it seems styled-components doesn't support it yet. I am not too strong about it but just a suggestion, perhaps there could be a prop containerStyle that styles the element <span aria-live="polite" aria-busy="true"> but I will be using containerClassName for now.