{"action":"created","issue":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/503","repository_url":"https://api.github.com/repos/styled-components/styled-components","labels_url":"https://api.github.com/repos/styled-components/styled-components/issues/503/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/styled-components/issues/503/comments","events_url":"https://api.github.com/repos/styled-components/styled-components/issues/503/events","html_url":"https://github.com/styled-components/styled-components/issues/503","id":207866199,"number":503,"title":"Utility classes","user":{"login":"TrevorHinesley","id":1079481,"avatar_url":"https://avatars.githubusercontent.com/u/1079481?v=3","gravatar_id":"","url":"https://api.github.com/users/TrevorHinesley","html_url":"https://github.com/TrevorHinesley","followers_url":"https://api.github.com/users/TrevorHinesley/followers","following_url":"https://api.github.com/users/TrevorHinesley/following{/other_user}","gists_url":"https://api.github.com/users/TrevorHinesley/gists{/gist_id}","starred_url":"https://api.github.com/users/TrevorHinesley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TrevorHinesley/subscriptions","organizations_url":"https://api.github.com/users/TrevorHinesley/orgs","repos_url":"https://api.github.com/users/TrevorHinesley/repos","events_url":"https://api.github.com/users/TrevorHinesley/events{/privacy}","received_events_url":"https://api.github.com/users/TrevorHinesley/received_events","type":"User","site_admin":false},"labels":[{"id":425493754,"url":"https://api.github.com/repos/styled-components/styled-components/labels/question","name":"question","color":"cc317c","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2017-02-15T17:07:09Z","updated_at":"2017-02-15T22:10:28Z","closed_at":"2017-02-15T17:42:43Z","body":"Is there a way to do utility classes? For instance, in Bootstrap I can do:\r\n\r\n`<button class='mt-0'>No margin on top</button>`\r\n\r\nTo remove margin-top from the button, and there are others for padding, margin, etc. This makes it extremely quick to adjust spacing for components. I know I can pass classes to className, but how would I go about creating such utility classes while remaining encapsulated like styled-components prefers?"},"comment":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/comments/280156521","html_url":"https://github.com/styled-components/styled-components/issues/503#issuecomment-280156521","issue_url":"https://api.github.com/repos/styled-components/styled-components/issues/503","id":280156521,"user":{"login":"k15a","id":20357450,"avatar_url":"https://avatars.githubusercontent.com/u/20357450?v=3","gravatar_id":"","url":"https://api.github.com/users/k15a","html_url":"https://github.com/k15a","followers_url":"https://api.github.com/users/k15a/followers","following_url":"https://api.github.com/users/k15a/following{/other_user}","gists_url":"https://api.github.com/users/k15a/gists{/gist_id}","starred_url":"https://api.github.com/users/k15a/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/k15a/subscriptions","organizations_url":"https://api.github.com/users/k15a/orgs","repos_url":"https://api.github.com/users/k15a/repos","events_url":"https://api.github.com/users/k15a/events{/privacy}","received_events_url":"https://api.github.com/users/k15a/received_events","type":"User","site_admin":false},"created_at":"2017-02-15T22:10:28Z","updated_at":"2017-02-15T22:10:28Z","body":"If you have you're utility classes defined globally what's wrong with className then? If you want to inject styles globally with styled-components you can use the injectGlobal function from styled components. You can't encapsulate \r\n\r\nSome examples which could help you:\r\n\r\n```JS\r\nfunction mt0(component) {\r\n  return styled(component)`\r\n    margin-top: 0;\r\n  `\r\n}\r\n\r\n// Which could be used\r\n\r\nconst Header = styled.div`\r\n  // styles\r\n`\r\n\r\nconst HeaderWithoutMargin = mt0(Header)\r\n```\r\n\r\n```JS\r\nconst utility = css`\r\n  ${props => props.mt0 && 'margin-top: 0;'}\r\n  ${props => props.p0 && 'padding: 0;'}\r\n`\r\n\r\n// Which could be used\r\n\r\nconst Header = styled.div`\r\n  ${utility}\r\n  // more styles\r\n`\r\n\r\n<Header mt0 p0 />\r\n```\r\n\r\nMaybe someone else can help you more with this ;) Feel free to reopen this issue if you're question is still unanswered. :)"}}
{"actor":{"display_login":"k15a"}}