solid-styled-components
solid-styled-components copied to clipboard
feature request: flag props that don't need to be propagated with '$'
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")!);
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.
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