{"action":"created","issue":{"url":"https://api.github.com/repos/cssinjs/react-jss/issues/257","repository_url":"https://api.github.com/repos/cssinjs/react-jss","labels_url":"https://api.github.com/repos/cssinjs/react-jss/issues/257/labels{/name}","comments_url":"https://api.github.com/repos/cssinjs/react-jss/issues/257/comments","events_url":"https://api.github.com/repos/cssinjs/react-jss/issues/257/events","html_url":"https://github.com/cssinjs/react-jss/issues/257","id":331524078,"node_id":"MDU6SXNzdWUzMzE1MjQwNzg=","number":257,"title":"StyleSheet injection order","user":{"login":"jeremie-stratumn","id":30652355,"node_id":"MDQ6VXNlcjMwNjUyMzU1","avatar_url":"https://avatars3.githubusercontent.com/u/30652355?v=4","gravatar_id":"","url":"https://api.github.com/users/jeremie-stratumn","html_url":"https://github.com/jeremie-stratumn","followers_url":"https://api.github.com/users/jeremie-stratumn/followers","following_url":"https://api.github.com/users/jeremie-stratumn/following{/other_user}","gists_url":"https://api.github.com/users/jeremie-stratumn/gists{/gist_id}","starred_url":"https://api.github.com/users/jeremie-stratumn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeremie-stratumn/subscriptions","organizations_url":"https://api.github.com/users/jeremie-stratumn/orgs","repos_url":"https://api.github.com/users/jeremie-stratumn/repos","events_url":"https://api.github.com/users/jeremie-stratumn/events{/privacy}","received_events_url":"https://api.github.com/users/jeremie-stratumn/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-12T10:12:19Z","updated_at":"2018-06-12T10:17:07Z","closed_at":"2018-06-12T10:17:07Z","author_association":"NONE","body":"I have an issue related to the style sheet injection order. Say I create a React component library that exports a `Button`:\r\n\r\n```\r\n// MyLib/index.js\r\nexport const Button = \r\n  injectSheet({ root: { color: 'blue' } })\r\n    (({children, classes, className}) => \r\n      <button className={classnames(classes.root, className)}>{children}</button>)\r\n``` \r\n\r\nNow I want to use this `Button` in my App:\r\n```\r\n// MyApp/menu.js\r\nimport { Button }  from 'mylib';\r\n\r\nexport const Menu = injectSheet({ button: { color: 'red' } })\r\n  (({classes}) => <Button className={classes.button}>Click Me</Button>\r\n```\r\n\r\nIn this scenario, I'd expect the `button` element in Menu to be red and this is how I understand this part of the documentation: https://github.com/cssinjs/react-jss/#injection-order\r\n> Style tags are injected in the exact same order as the injectSheet() invocation. Source order specificity is higher the lower style tag is in the tree, therefore you should call injectSheet of components you want to override first.\r\n\r\nIn practice this is what I see, so it works fine, except when I am developping both MyLib and MyApp at the same time so linking MyLib in MyApp: `yarn link mylib`. In that case, I have noticed some order issue. The button element has 2 classes that look like this:\r\n- `Button-root-1-1-1` -> this is coming from the first `injectSheet` in MyLib\r\n- `Menu-button-0-1-2` -> from the second `injectSheet` in Menu\r\nIn this scenario, the `Button-root-1-1-1` class wins and the button is blue and not red..\r\n\r\nI've noticed that the `moduleId` number differs between the two. Could it be the issue? I tried using a `JssProvider` with `classNameGenerator` prop in MyApp as explained here https://github.com/cssinjs/react-jss/#multi-tree-setup which seems to keep the `moduleId` to 0 but still I see the same css conflict.\r\n\r\nAny idea on how to solve this?\r\n\r\nThanks"},"comment":{"url":"https://api.github.com/repos/cssinjs/react-jss/issues/comments/396540115","html_url":"https://github.com/cssinjs/react-jss/issues/257#issuecomment-396540115","issue_url":"https://api.github.com/repos/cssinjs/react-jss/issues/257","id":396540115,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NjU0MDExNQ==","user":{"login":"kof","id":52824,"node_id":"MDQ6VXNlcjUyODI0","avatar_url":"https://avatars0.githubusercontent.com/u/52824?v=4","gravatar_id":"","url":"https://api.github.com/users/kof","html_url":"https://github.com/kof","followers_url":"https://api.github.com/users/kof/followers","following_url":"https://api.github.com/users/kof/following{/other_user}","gists_url":"https://api.github.com/users/kof/gists{/gist_id}","starred_url":"https://api.github.com/users/kof/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kof/subscriptions","organizations_url":"https://api.github.com/users/kof/orgs","repos_url":"https://api.github.com/users/kof/repos","events_url":"https://api.github.com/users/kof/events{/privacy}","received_events_url":"https://api.github.com/users/kof/received_events","type":"User","site_admin":false},"created_at":"2018-06-12T10:17:07Z","updated_at":"2018-06-12T10:17:07Z","author_association":"MEMBER","body":"if module id differs, you included multiple versions of JSS in your bundle, try to fix that and use one version."}}
{"actor":{"display_login":"kof"}}