Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
illiaChaban opened this issue Aug 27, 2022 · 1 comment

Comments

@illiaChaban
Copy link

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.

@blarfoon
Copy link

blarfoon commented Oct 4, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants