{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/5053","repository_url":"https://api.github.com/repos/callemall/material-ui","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/5053/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/5053/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/5053/events","html_url":"https://github.com/callemall/material-ui/issues/5053","id":172738632,"number":5053,"title":"[AppBar] Composability and the muiName property","user":{"login":"PolGuixe","id":6626225,"avatar_url":"https://avatars.githubusercontent.com/u/6626225?v=3","gravatar_id":"","url":"https://api.github.com/users/PolGuixe","html_url":"https://github.com/PolGuixe","followers_url":"https://api.github.com/users/PolGuixe/followers","following_url":"https://api.github.com/users/PolGuixe/following{/other_user}","gists_url":"https://api.github.com/users/PolGuixe/gists{/gist_id}","starred_url":"https://api.github.com/users/PolGuixe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PolGuixe/subscriptions","organizations_url":"https://api.github.com/users/PolGuixe/orgs","repos_url":"https://api.github.com/users/PolGuixe/repos","events_url":"https://api.github.com/users/PolGuixe/events{/privacy}","received_events_url":"https://api.github.com/users/PolGuixe/received_events","type":"User","site_admin":false},"labels":[{"id":303025136,"url":"https://api.github.com/repos/callemall/material-ui/labels/Composability","name":"Composability","color":"1d76db","default":false},{"id":234029522,"url":"https://api.github.com/repos/callemall/material-ui/labels/Docs","name":"Docs","color":"fbca04","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-08-23T15:57:39Z","updated_at":"2016-11-09T09:33:37Z","closed_at":"2016-09-24T11:02:06Z","body":"### Nested children inside AppBar obtain different themes\n### Steps to reproduce\n\nWorks as expected:\n\n``` jsx\nclass NavbarInstance extends React.Component {\n    constructor(props) {\n        super(props);\n    }\n\n    returnHome() {\n        FlowRouter.go('landing-page');\n    }\n\n    render() {\n        return (\n            <AppBar\n                title=\"Title\"\n                onTitleTouchTap={this.returnHome}\n                iconElementRight={<FlatButton eventKey={1} label=\"Login\" icon={< UserIcon />} href={FlowRouter.path('users.login')}/>}\n            />\n    );\n    }\n}\n```\n\n<img width=\"894\" alt=\"screen shot 2016-08-23 at 17 47 54\" src=\"https://cloud.githubusercontent.com/assets/6626225/17898985/fe930324-6959-11e6-9b7d-31853ef7e0c7.png\">\n\nDoesn't work as expected:\n\n``` jsx\nclass NavbarInstance extends React.Component {\n    constructor(props) {\n        super(props);\n    }\n\n    returnHome() {\n        FlowRouter.go('landing-page');\n    }\n\n    render() {\n        return (\n            <AppBar\n                title=\"Title\"\n                onTitleTouchTap={this.returnHome}\n                iconElementRight={< NavRightContent user={this.props.user} />}\n            />\n    );\n    }\n}\n //------------------------\nclass NavRightContent extends React.Component {\n    constructor(props) {\n        super(props);\n    }\n    render() {\n\n        return(<FlatButton eventKey={1} label=\"Login\" icon={< UserIcon />} href={FlowRouter.path('users.login')}/>)\n    }\n}\n```\n\n<img width=\"892\" alt=\"screen shot 2016-08-23 at 17 49 01\" src=\"https://cloud.githubusercontent.com/assets/6626225/17899206/c950583c-695a-11e6-80db-ab791a6ff7f3.png\">\n\nAs it can be seen the color, margins and padding are different.\n### Versions\n- Material-UI: v0.15.4\n- React: v0.15.3\n"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/259370391","html_url":"https://github.com/callemall/material-ui/issues/5053#issuecomment-259370391","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/5053","id":259370391,"user":{"login":"amaurymartiny","id":1293565,"avatar_url":"https://avatars.githubusercontent.com/u/1293565?v=3","gravatar_id":"","url":"https://api.github.com/users/amaurymartiny","html_url":"https://github.com/amaurymartiny","followers_url":"https://api.github.com/users/amaurymartiny/followers","following_url":"https://api.github.com/users/amaurymartiny/following{/other_user}","gists_url":"https://api.github.com/users/amaurymartiny/gists{/gist_id}","starred_url":"https://api.github.com/users/amaurymartiny/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amaurymartiny/subscriptions","organizations_url":"https://api.github.com/users/amaurymartiny/orgs","repos_url":"https://api.github.com/users/amaurymartiny/repos","events_url":"https://api.github.com/users/amaurymartiny/events{/privacy}","received_events_url":"https://api.github.com/users/amaurymartiny/received_events","type":"User","site_admin":false},"created_at":"2016-11-09T09:33:37Z","updated_at":"2016-11-09T09:33:37Z","body":"How about when the component is `connect`-ed with redux?\r\n\r\nHere's my code: \r\n\r\n```\r\n// LoginContainer.js\r\n\r\nclass Login extends React.Component {\r\n  constructor(props) {\r\n    super(props)\r\n  }\r\n\r\n  render() {\r\n    return (<FlatButton onClick={this.props.onLoginClick} label='Login' />)\r\n  }\r\n\r\n  static muiName = 'FlatButton'\r\n}\r\n\r\nLogin.propTypes = {\r\n  isAuthenticated: React.PropTypes.bool,\r\n  isAuthenticated: React.PropTypes.object,\r\n  onLoginClick: React.PropTypes.func.isRequired,\r\n  onLogoutClick: React.PropTypes.func.isRequired\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n  const { isAuthenticated, profile } = state.auth\r\n  return {\r\n    isAuthenticated,\r\n    profile\r\n  }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n  return {\r\n    onLoginClick: () => dispatch(loginRequest()),\r\n    onLogoutClick: () => dispatch(logoutSuccess())\r\n  }\r\n}\r\n\r\nconst LoginContainer = connect(\r\n  mapStateToProps,\r\n  mapDispatchToProps\r\n)(Login)\r\n\r\nexport default LoginContainer\r\n```\r\n\r\nAnd the AppBar is simply `<AppBar title='Timed' iconElementRight={<LoginContainer />} />`\r\n\r\nI still have wrong paddings, margins and color, even after putting `static muiName = 'FlatButton'`:\r\n![screen shot 2016-11-09 at 10 31 20 am](https://cloud.githubusercontent.com/assets/1293565/20133397/b17dfb2a-a667-11e6-973c-c547ca1fb3a1.png)\r\n"}}
{"actor":{"display_login":"amaurymartiny"}}