{"action":"created","issue":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/134","repository_url":"https://api.github.com/repos/styled-components/styled-components","labels_url":"https://api.github.com/repos/styled-components/styled-components/issues/134/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/styled-components/issues/134/comments","events_url":"https://api.github.com/repos/styled-components/styled-components/issues/134/events","html_url":"https://github.com/styled-components/styled-components/issues/134","id":184804384,"number":134,"title":"Question: How to manage styles that change for every render of a component","user":{"login":"JamieDixon","id":1519443,"avatar_url":"https://avatars.githubusercontent.com/u/1519443?v=3","gravatar_id":"","url":"https://api.github.com/users/JamieDixon","html_url":"https://github.com/JamieDixon","followers_url":"https://api.github.com/users/JamieDixon/followers","following_url":"https://api.github.com/users/JamieDixon/following{/other_user}","gists_url":"https://api.github.com/users/JamieDixon/gists{/gist_id}","starred_url":"https://api.github.com/users/JamieDixon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JamieDixon/subscriptions","organizations_url":"https://api.github.com/users/JamieDixon/orgs","repos_url":"https://api.github.com/users/JamieDixon/repos","events_url":"https://api.github.com/users/JamieDixon/events{/privacy}","received_events_url":"https://api.github.com/users/JamieDixon/received_events","type":"User","site_admin":false},"labels":[{"id":425493749,"url":"https://api.github.com/repos/styled-components/styled-components/labels/bug","name":"bug","color":"eb3d31","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/styled-components/styled-components/milestones/2","html_url":"https://github.com/styled-components/styled-components/milestones/Backlog","labels_url":"https://api.github.com/repos/styled-components/styled-components/milestones/2/labels","id":2076517,"number":2,"title":"Backlog","description":"","creator":{"login":"mxstbr","id":7525670,"avatar_url":"https://avatars.githubusercontent.com/u/7525670?v=3","gravatar_id":"","url":"https://api.github.com/users/mxstbr","html_url":"https://github.com/mxstbr","followers_url":"https://api.github.com/users/mxstbr/followers","following_url":"https://api.github.com/users/mxstbr/following{/other_user}","gists_url":"https://api.github.com/users/mxstbr/gists{/gist_id}","starred_url":"https://api.github.com/users/mxstbr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mxstbr/subscriptions","organizations_url":"https://api.github.com/users/mxstbr/orgs","repos_url":"https://api.github.com/users/mxstbr/repos","events_url":"https://api.github.com/users/mxstbr/events{/privacy}","received_events_url":"https://api.github.com/users/mxstbr/received_events","type":"User","site_admin":false},"open_issues":8,"closed_issues":5,"state":"open","created_at":"2016-10-18T07:44:29Z","updated_at":"2016-11-01T13:55:15Z","due_on":null,"closed_at":null},"comments":10,"created_at":"2016-10-24T10:32:34Z","updated_at":"2016-11-09T20:04:25Z","closed_at":null,"body":"Example component:\n\n```\nconst Comp = styled.div`\n     /*lots of styles here*/\n     animation-delay: ${ props => props.index * 0.1 };\n`;\n```\n\nWith this component rendered over a collection of items, we'll generate a new style tag with an associated class for each one.\n\nIs there a recommended way of working with these kinds of styles so as not to thrash the head with  a new `style` tag everytime `render` is called on `Comp`?\n- One solution could be to move the `/* lots of styles here */` into another component that doesn't include the dynamic properties that cause huge amounts of CSS to be rendered into the `head`. This way the generated `style` tag only contains the `animation-delay` property. Still a lot of `style` tags being injected into the head though and since the injection only happens at render time, this could cause some trashing.\n- Another option is to put the `animationDelay` into the `style` prop of the component as we compose the components and not let styled-components handle this.\n\nHow would you do this? Is there a recommended approach?\n\nI saw there might be some plans to extract static styles which, as a solution, is similar to our first option above.\n"},"comment":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/comments/259512042","html_url":"https://github.com/styled-components/styled-components/issues/134#issuecomment-259512042","issue_url":"https://api.github.com/repos/styled-components/styled-components/issues/134","id":259512042,"user":{"login":"kof","id":52824,"avatar_url":"https://avatars.githubusercontent.com/u/52824?v=3","gravatar_id":"","url":"https://api.github.com/users/kof","html_url":"https://github.com/kof","followers_url":"https://api.github.com/users/kof/followers","following_url":"https://api.github.com/users/kof/following{/other_user}","gists_url":"https://api.github.com/users/kof/gists{/gist_id}","starred_url":"https://api.github.com/users/kof/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kof/subscriptions","organizations_url":"https://api.github.com/users/kof/orgs","repos_url":"https://api.github.com/users/kof/repos","events_url":"https://api.github.com/users/kof/events{/privacy}","received_events_url":"https://api.github.com/users/kof/received_events","type":"User","site_admin":false},"created_at":"2016-11-09T20:04:25Z","updated_at":"2016-11-09T20:04:25Z","body":"I think this case should be avoided completely. Ideally user would be allowed to declare styled components only in the top level scope of the module, same like import statement."}}
{"actor":{"display_login":"kof"}}