{"action":"opened","issue":{"url":"https://api.github.com/repos/threepointone/glamor/issues/105","repository_url":"https://api.github.com/repos/threepointone/glamor","labels_url":"https://api.github.com/repos/threepointone/glamor/issues/105/labels{/name}","comments_url":"https://api.github.com/repos/threepointone/glamor/issues/105/comments","events_url":"https://api.github.com/repos/threepointone/glamor/issues/105/events","html_url":"https://github.com/threepointone/glamor/issues/105","id":187560897,"number":105,"title":"Glamor customizing common components best practices.","user":{"login":"mikedklein","id":3578720,"avatar_url":"https://avatars.githubusercontent.com/u/3578720?v=3","gravatar_id":"","url":"https://api.github.com/users/mikedklein","html_url":"https://github.com/mikedklein","followers_url":"https://api.github.com/users/mikedklein/followers","following_url":"https://api.github.com/users/mikedklein/following{/other_user}","gists_url":"https://api.github.com/users/mikedklein/gists{/gist_id}","starred_url":"https://api.github.com/users/mikedklein/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mikedklein/subscriptions","organizations_url":"https://api.github.com/users/mikedklein/orgs","repos_url":"https://api.github.com/users/mikedklein/repos","events_url":"https://api.github.com/users/mikedklein/events{/privacy}","received_events_url":"https://api.github.com/users/mikedklein/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-11-06T13:15:28Z","updated_at":"2016-11-06T13:15:28Z","closed_at":null,"body":"This isn't really an issue with glamor more a question on what best practices would be if I have a common UI component that I may want to allow for additional customization: \r\n```\r\nimport React, { PropTypes } from 'react'\r\nimport { style } from 'glamor'\r\n\r\nconst sectionStyle = style({\r\n  minHeight: 500,\r\n  width: '100%',\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n  alignItems: 'center'\r\n})\r\n\r\nconst Section = (props) => {\r\n  let className = sectionStyle\r\n  // Here is where I am not sure if this is the best way to go about this\r\n  if (props.className !== undefined) {\r\n    className += ` ${props.className}`\r\n  }\r\n\r\n  return (\r\n    <section className={className}>\r\n      {props.children}\r\n    </section>\r\n  )\r\n}\r\n\r\nSection.propTypes = {\r\n  children: PropTypes.element,\r\n  className: PropTypes.object\r\n}\r\n\r\nexport default Section\r\n```\r\n\r\nSo if in another component I want to add a background:\r\n\r\n```\r\nconst sectionStyle = style({\r\n  background: 'url(\"http://i3.kym-cdn.com/photos/images/original/000/546/077/689.jpg\") center',\r\n  backgroundSize: 'cover'\r\n})\r\n\r\nclass App extends Component {\r\n  render () {\r\n    return (\r\n      <div className='App'>\r\n        <Section className={sectionStyle}>\r\n          <h1>Section 1</h1>\r\n        </Section>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport default App\r\n```\r\n\r\nIs this the best way to go about making components like this? Should I be using merge? Thanks for any clarification."}}
{"actor":{"display_login":"mikedklein"}}