{"action":"created","issue":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/184","repository_url":"https://api.github.com/repos/styled-components/styled-components","labels_url":"https://api.github.com/repos/styled-components/styled-components/issues/184/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/styled-components/issues/184/comments","events_url":"https://api.github.com/repos/styled-components/styled-components/issues/184/events","html_url":"https://github.com/styled-components/styled-components/issues/184","id":188885760,"number":184,"title":"Using styled-components with react-router","user":{"login":"ForbesLindesay","id":1260646,"avatar_url":"https://avatars.githubusercontent.com/u/1260646?v=3","gravatar_id":"","url":"https://api.github.com/users/ForbesLindesay","html_url":"https://github.com/ForbesLindesay","followers_url":"https://api.github.com/users/ForbesLindesay/followers","following_url":"https://api.github.com/users/ForbesLindesay/following{/other_user}","gists_url":"https://api.github.com/users/ForbesLindesay/gists{/gist_id}","starred_url":"https://api.github.com/users/ForbesLindesay/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ForbesLindesay/subscriptions","organizations_url":"https://api.github.com/users/ForbesLindesay/orgs","repos_url":"https://api.github.com/users/ForbesLindesay/repos","events_url":"https://api.github.com/users/ForbesLindesay/events{/privacy}","received_events_url":"https://api.github.com/users/ForbesLindesay/received_events","type":"User","site_admin":false},"labels":[{"id":461725494,"url":"https://api.github.com/repos/styled-components/styled-components/labels/discussion","name":"discussion","color":"4a558a","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":16,"created_at":"2016-11-12T02:01:21Z","updated_at":"2016-12-31T22:37:21Z","closed_at":null,"body":"react-router's `<Link>` component and react-modal2's `<Modal>` component accept additional classNames via separate properties.  e.g. `<Link>` accepts `activeClassName` and `<Modal>` accepts `backdropClassName` and `modalClassName`.  It would be great to have a way to style these using styled-components.  Perhaps we could have something like:\r\n\r\n```js\r\nconst StyledLink = styled(Link)`\r\n  color: palevioletred;\r\n  display: block;\r\n  margin: 0.5em 0;\r\n  font-family: Helvetica, Arial, sans-serif;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n  &.active {\r\n    color: red;\r\n  }\r\n`;\r\n```\r\n\r\nwhere `&.active` gets passed as a separate class name to the `activeClassName` property."},"comment":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/comments/269884373","html_url":"https://github.com/styled-components/styled-components/issues/184#issuecomment-269884373","issue_url":"https://api.github.com/repos/styled-components/styled-components/issues/184","id":269884373,"user":{"login":"adrianmcli","id":943555,"avatar_url":"https://avatars.githubusercontent.com/u/943555?v=3","gravatar_id":"","url":"https://api.github.com/users/adrianmcli","html_url":"https://github.com/adrianmcli","followers_url":"https://api.github.com/users/adrianmcli/followers","following_url":"https://api.github.com/users/adrianmcli/following{/other_user}","gists_url":"https://api.github.com/users/adrianmcli/gists{/gist_id}","starred_url":"https://api.github.com/users/adrianmcli/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adrianmcli/subscriptions","organizations_url":"https://api.github.com/users/adrianmcli/orgs","repos_url":"https://api.github.com/users/adrianmcli/repos","events_url":"https://api.github.com/users/adrianmcli/events{/privacy}","received_events_url":"https://api.github.com/users/adrianmcli/received_events","type":"User","site_admin":false},"created_at":"2016-12-31T22:37:20Z","updated_at":"2016-12-31T22:37:20Z","body":"@jontro That's a great idea with ReactCSSTransitionGroup. It's a use-case that I think will be very important to me.\r\n\r\nI never liked the idea of having to define my animation duration in BOTH a globally-applied CSS AND inside my JS component file. It would be most ideal if Styled-Components can let me keep this in one single file."}}
{"actor":{"display_login":"adrianmcli"}}