Consider this example:
const C1 = ({ children }) => <div>{children}</div>;
const C2 = styled(C1)({});
const C3 = styled(C2)({});
const App = () => <C3>Test</C3>
That is, styled element C3 extends styled element C2 which by itself extends component C1.
This causes a wrong DOM element to be rendered (notice the c1 tag):
<c1 class="C1-2-0-1">Test</c1>
Online example
If I replace C1 with a styled element by itself (const C1 = styled('div')({...})), the generated DOM is correct.
Consider this example:
That is, styled element C3 extends styled element C2 which by itself extends component C1.
This causes a wrong DOM element to be rendered (notice the c1 tag):
<c1 class="C1-2-0-1">Test</c1>Online example
If I replace C1 with a styled element by itself (
const C1 = styled('div')({...})), the generated DOM is correct.