solid-styled-components icon indicating copy to clipboard operation
solid-styled-components copied to clipboard

feature request: flag props that don't need to be propagated with '$'

Open illiaChaban opened this issue 3 years ago • 1 comments

styled components is awesome, but one problem it has is that it propagates all props to the html elements . For example, if I have a prop specific to styling like "size", it will be propagated to HTML:

import { render } from "solid-js/web";
import { styled } from "solid-styled-components";

const MyComponent = styled("div")`
  background: black;
  width: ${(props: { size: number }) => props.size}px;
  height: ${(props) => props.size}px;
`;

render(() => <MyComponent size={40} />, document.getElementById("app")!);

sandbox link

image

I'd like to avoid this. This library solved this problem by marking all props that shouldn't be propagated with "$" symbol. So my "size" prop would become "$size". Same goes for $theme and $as props. IMO it's a clear and concise solution.

illiaChaban avatar Aug 27 '22 20:08 illiaChaban

up, I would love this issue to move forward. Is anyone currently working on it? If not, I might be able to pick this up and open a PR in a few weeks

blarfoon avatar Oct 04 '22 12:10 blarfoon