{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/8903","repository_url":"https://api.github.com/repos/callemall/material-ui","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/8903/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/8903/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/8903/events","html_url":"https://github.com/callemall/material-ui/issues/8903","id":269456202,"number":8903,"title":"inherited font sizes","user":{"login":"bradzacher","id":7462525,"avatar_url":"https://avatars1.githubusercontent.com/u/7462525?v=4","gravatar_id":"","url":"https://api.github.com/users/bradzacher","html_url":"https://github.com/bradzacher","followers_url":"https://api.github.com/users/bradzacher/followers","following_url":"https://api.github.com/users/bradzacher/following{/other_user}","gists_url":"https://api.github.com/users/bradzacher/gists{/gist_id}","starred_url":"https://api.github.com/users/bradzacher/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bradzacher/subscriptions","organizations_url":"https://api.github.com/users/bradzacher/orgs","repos_url":"https://api.github.com/users/bradzacher/repos","events_url":"https://api.github.com/users/bradzacher/events{/privacy}","received_events_url":"https://api.github.com/users/bradzacher/received_events","type":"User","site_admin":false},"labels":[{"id":710592375,"url":"https://api.github.com/repos/callemall/material-ui/labels/component:%20Typography","name":"component: Typography","color":"ffffff","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-10-30T01:15:27Z","updated_at":"2017-10-30T09:55:29Z","closed_at":null,"author_association":"NONE","body":"There are a number of components that explicitly use `inherit` for their font size (or the define no font size at all).\r\nThis causes a problem if you're using a root `font-size` that isn't `16px`.\r\n\r\nFor example, we've been working with `1rem = 8px` as it makes defining styles easier with our `8px` grid design.\r\nHowever obviously this causes a problem with the `font-size: inherit` as it will inherit `8px`, rather than setting it to a sensible size based off of the theme.\r\n\r\nAdditionally, you can't quick-fix this (without breaking encapsulation). If you set the `font-size` on your react root element, this works fine as long as you don't use any components that portal render outside (i.e. `Dialog`, or `Popover`).\r\nIf you use a portal, it renders the element as a direct child of the body, outside of your react root element.\r\nSo the only fix is to use `jss` to `@global` add a selector to the page:\r\n```CSS\r\n[data-mui-portal=true] {\r\n    font-size: 16px;\r\n}\r\n```\r\n\r\nExamples of elements with this problem:\r\n- [ ] [`Input`](https://github.com/callemall/material-ui/blob/9ea0d4d67dd8d3f2c9f8602856655bfd07fc70ea/src/Input/Input.js#L105)\r\n- [ ] [`InputLabel` / `FormLabel`](https://github.com/callemall/material-ui/blob/9ea0d4d67dd8d3f2c9f8602856655bfd07fc70ea/src/Form/FormLabel.js#L12-L17)"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/340395875","html_url":"https://github.com/callemall/material-ui/issues/8903#issuecomment-340395875","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/8903","id":340395875,"user":{"login":"bradzacher","id":7462525,"avatar_url":"https://avatars1.githubusercontent.com/u/7462525?v=4","gravatar_id":"","url":"https://api.github.com/users/bradzacher","html_url":"https://github.com/bradzacher","followers_url":"https://api.github.com/users/bradzacher/followers","following_url":"https://api.github.com/users/bradzacher/following{/other_user}","gists_url":"https://api.github.com/users/bradzacher/gists{/gist_id}","starred_url":"https://api.github.com/users/bradzacher/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bradzacher/subscriptions","organizations_url":"https://api.github.com/users/bradzacher/orgs","repos_url":"https://api.github.com/users/bradzacher/repos","events_url":"https://api.github.com/users/bradzacher/events{/privacy}","received_events_url":"https://api.github.com/users/bradzacher/received_events","type":"User","site_admin":false},"created_at":"2017-10-30T09:55:29Z","updated_at":"2017-10-30T09:55:29Z","author_association":"NONE","body":"Looking through the code base I feel that a standard needs to be settled on.\r\nRight now typography is defined using static values defined based on rems, spacing is defined using a purely static px value, and everything else is inherited from the body.\r\n\r\nThe problem I see is that in Typography it defines `fontSize` as 14px, but it assumes the html font size is 16px. This would leaves discrepancies between some components and leaves it open for the ambiguities and problems which I've logged here."}}
{"actor":{"display_login":"bradzacher"}}