{"action":"created","issue":{"url":"https://api.github.com/repos/cssinjs/react-jss/issues/235","repository_url":"https://api.github.com/repos/cssinjs/react-jss","labels_url":"https://api.github.com/repos/cssinjs/react-jss/issues/235/labels{/name}","comments_url":"https://api.github.com/repos/cssinjs/react-jss/issues/235/comments","events_url":"https://api.github.com/repos/cssinjs/react-jss/issues/235/events","html_url":"https://github.com/cssinjs/react-jss/issues/235","id":314810890,"number":235,"title":"React-JSS function rules aren't working","user":{"login":"nai888","id":6866411,"avatar_url":"https://avatars3.githubusercontent.com/u/6866411?v=4","gravatar_id":"","url":"https://api.github.com/users/nai888","html_url":"https://github.com/nai888","followers_url":"https://api.github.com/users/nai888/followers","following_url":"https://api.github.com/users/nai888/following{/other_user}","gists_url":"https://api.github.com/users/nai888/gists{/gist_id}","starred_url":"https://api.github.com/users/nai888/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nai888/subscriptions","organizations_url":"https://api.github.com/users/nai888/orgs","repos_url":"https://api.github.com/users/nai888/repos","events_url":"https://api.github.com/users/nai888/events{/privacy}","received_events_url":"https://api.github.com/users/nai888/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-16T20:43:53Z","updated_at":"2018-04-16T21:57:17Z","closed_at":null,"author_association":"NONE","body":"While working on #234, I had trouble getting Function Rules to work in the [playground](https://codesandbox.io/s/j3l06yyqpw). Function Values _did_ work.\r\n\r\nFor example:\r\n\r\n```javascript\r\nimport React from 'react'\r\nimport {render} from 'react-dom'\r\nimport injectSheet from 'react-jss'\r\n\r\nconst styles = {\r\n  myButton: {\r\n    padding: props => props.spacing\r\n  },\r\n  myLabel: (props) => ({\r\n    display: 'block',\r\n    color: props.labelColor,\r\n    fontWeight: props.fontWeight,\r\n    fontStyle: props.fontStyle\r\n  })\r\n}\r\n\r\nconst Button = ({ classes, children }) => (\r\n  <button className={classes.myButton}>\r\n    <span className={classes.myLabel}>\r\n      {children}\r\n    </span>\r\n  </button>\r\n)\r\n\r\nButton.defaultProps = {\r\n  spacing: 10,\r\n  fontWeight: 'bold',\r\n  labelColor: 'red'\r\n}\r\n\r\nconst StyledButton = injectSheet(styles)(Button)\r\n\r\nconst App = () => (\r\n  <StyledButton fontStyle='italic'>\r\n    Submit\r\n  </StyledButton>\r\n)\r\n\r\nrender(<App />, document.getElementById(\"root\"))\r\n```\r\n\r\nIn the above code, which is based on the example that already exists in the docs, `myButton` was styled correctly, but `myLabel` received no styling at all.\r\n\r\nThe only way I could get it to work was if I converted the function rule to several function values:\r\n\r\n```javascript\r\nconst styles = {\r\n  myButton: {\r\n    padding: props => props.spacing\r\n  },\r\n  myLabel: {\r\n    display: 'block',\r\n    color: props => props.labelColor,\r\n    fontWeight: props => props.fontWeight,\r\n    fontStyle: props => props.fontStyle\r\n  }\r\n}\r\n```\r\n\r\nAm I doing something wrong, or is this a bug?"},"comment":{"url":"https://api.github.com/repos/cssinjs/react-jss/issues/comments/381763217","html_url":"https://github.com/cssinjs/react-jss/issues/235#issuecomment-381763217","issue_url":"https://api.github.com/repos/cssinjs/react-jss/issues/235","id":381763217,"user":{"login":"HenriBeck","id":8514706,"avatar_url":"https://avatars1.githubusercontent.com/u/8514706?v=4","gravatar_id":"","url":"https://api.github.com/users/HenriBeck","html_url":"https://github.com/HenriBeck","followers_url":"https://api.github.com/users/HenriBeck/followers","following_url":"https://api.github.com/users/HenriBeck/following{/other_user}","gists_url":"https://api.github.com/users/HenriBeck/gists{/gist_id}","starred_url":"https://api.github.com/users/HenriBeck/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HenriBeck/subscriptions","organizations_url":"https://api.github.com/users/HenriBeck/orgs","repos_url":"https://api.github.com/users/HenriBeck/repos","events_url":"https://api.github.com/users/HenriBeck/events{/privacy}","received_events_url":"https://api.github.com/users/HenriBeck/received_events","type":"User","site_admin":false},"created_at":"2018-04-16T21:57:17Z","updated_at":"2018-04-16T21:57:17Z","author_association":"CONTRIBUTOR","body":"When I copy your code into a new sandbox it works for me. All of the styled are being applied correctly.\r\nhttps://codesandbox.io/s/rj9x99wnm4"}}
{"actor":{"display_login":"HenriBeck"}}