Open ajayjindal2 opened 6 months ago
To add more context:
const Heading = styled(H3)({
marginBlock: '0 5px',
});
gets compiled to
const Heading = forwardRef(
({ as: C = H3, style: __cmpls, ...__cmplp }, __cmplr) => {
return (
<CC>
<CS>{[_]}</CS>
<C
{...__cmplp}
style={__cmpls}
ref={__cmplr}
className={ax(["_1mou1s5a", __cmplp.className])}
/>
</CC>
);
}
);
As you can see, as
overwrites H3
. I would recommend using css
prop instead of styled
. https://compiledcssinjs.com/docs/api-css
Describe the bug
If i have styled component from @compiled/react like H3, and then reuse it to be styled again into Heading and then use
as
prop to render it as h1.i would only get styles of
marginBlock: '0 5px',
in UI rendering the styles from H3 are lostExpected behavior
styles from H3 are should also be applied.
Workaround
Using as props before 2nd styled on the component as suggested by @liamqma +++++