Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Inverse font size from theme
See original GitHub issueThe font-size behaves the opposite way than in CSS and is not documented:
// Normal font-size
createMuiTheme({ typography: { htmlFontSize: 10 } });
// Expected 2x the previous font-size, instead got 0.5x
createMuiTheme({ typography: { htmlFontSize: 20 } });
- I have searched the issues of this repository and believe that this is not a duplicate.
Expected Behavior
The font-size depends on the property htmlFontSize.
Current Behavior
The font-size is inversely proportional to the htmlFontSize instead of directly proportional.
Steps to Reproduce (for bugs)
If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you? I am an OSS developer as well, I think the issue is explained quite clearly and this question is very condescending. I am contributing because I think it might improve material-ui long-term, not to get help.
- Set-up a theme with
htmlFontSizeof 10. - Contemplate its size.
- Change the
htmlFontSizeproperty to 20. - Marvel at how the text becomes smaller instead of larger.
Context
I was following the theme tutorial. Since there is no documentation on htmlFontSize, the expected result is that it behaves similar to font-size.
Your Environment
| Tech | Version |
|---|---|
| Material-UI | 1.0.0-beta.36 |
| React | 16.2.0 |
| browser | any |
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:9 (6 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I did read that bit 3-4 times beforehand and applied that before opening this. I even dug into the code, that is why I decided to open this! I do know a thing or two about CSS libraries. That bit of documentation seems to be saying “make the
font-sizeof the html to62.5%and don’t change that. Use thehtmlFontSizeinstead as shown in this example”.So the documentation seems to be indicating exactly the opposite of what is happening, and that is why I opened this. I know material-ui uses rem so it’ll be dependent on the base html css and I’m using it like that on my project. But I didn’t know that until digging into the code and was really surprised of this behavior.
My recommendation would be to change the name of
htmlFontSizeto something visitors wouldn’t want to touch likehtmlFontDivisor. Or at least document thathtmlFontSizedoes not set thefont-size(which is highly misleading). But don’t worry, won’t bother you again.@franciscop-invast I’m happy you raised this point. I believe you have proven with the issue that we should be more strict about this policy. The point is to ask people work upfront before they open an issue. So they think twice and have a closer look at the documentation.
If you would have spend more time upfront, you would have notice the following sentence in the documentation:
Now, I believe we need to improve the documentation. We can add a sentence about what’s this
htmlFontSizekey is for (maybe not what you are looking for, it’s the font size of the<html>element).Regarding changing the font size, each typography elements has it’s own. You need to change each individually or hack the
htmlFontSizepurpuse to get a global increase. For instance, you could tell Material-UI the html font size is 14px while it’s 16px on the DOM. Material-UI will increase the rem value to compensate. Overall, all the font sizes will be uniformily increased.