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
396 stars 19 forks source link

Add withComponent Interface or as Prop Similar to EmotionJS #147

Closed wh5938316 closed 1 week ago

wh5938316 commented 1 week ago

Summary

I am wondering if there are any plans to add a withComponent interface or an as prop similar to EmotionJS. This feature would be incredibly useful for scenarios where we need to specify the HTML tag used for rendering a component.

Examples

https://emotion.sh/docs/styled#change-the-rendered-tag-using-withcomponent https://styled-components.com/docs/api#as-polymorphic-prop

Motivation

const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)

Search keywords: withComponent, as Prop, EmotionJS

brijeshb42 commented 1 week ago

This already works right now.