search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
693 stars 36 forks source link

Fix styled inheritance #40

Closed siriwatknp closed 5 months ago

siriwatknp commented 5 months ago

Issue

A Pigment styled component (child) is replaced by as value provided to the parent:

const Child = styled('span')({ classes: ['child'] });

const Parent = styled(Child)({ classes: ['parent'] });

<Parent as="div" />; // <div class="parent" />

This behavior is different from Emotion & Styled-components where styles of child are propagated even as is provided to the parent.

Expected

const Child = styled('span')({ classes: ['child'] });

const Parent = styled(Child)({ classes: ['parent'] });

<Parent as="div" />; // <div class="child parent" />