-
Notifications
You must be signed in to change notification settings - Fork 679
Description
Describe the bug
I noticed that if I omit some keys from the theme object I pass to the ThemeProvider, such as breakpoints and fontSizes, some default values will be used, and I couldn’t find that documented anywhere so I don’t think it’s by design. The default values for these two keys are the same as in the base preset, but I can confirm that it’s not the whole base preset, as fonts and fontWeights behave as expected, for example. Could it have something to do with the fact that breakpoints and fontSizes are arrays? What’s especially strange is that I can’t find the default values in the theme returned by the useTheme hook; they only pop up when I try to use them (e.g. fontSize: 1, or any value set to an array will flip at 40em, then 52em, etc.).
To Reproduce
- Leave out the
breakpointsandfontSizeskeys from your theme. - Render
<div sx={{ fontSize: 1 }} /> - Notice the rendered CSS is
font-size: 14px.
Expected behavior
I would’ve expected the rendered CSS to be font-size: 1px, which is the case when the theme has a fontSizes key set to an empty array.