[theme] Getting `styleFromPropValue` for spacing will return undefined when using custom breakpoint named small
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Setting theme breakpoints like this
breakpoints: {
values: {
xs: false,
sm: false,
md: false,
lg: false,
xl: false,
smallest: 0,
small: 375,
mobile: 600,
tablet: 992,
desktop: 1200,
}
}
will return marginundefined: 32px
when using
<Stack spacing={4}>
...
</Stack>
It seems that just the name small
will cause that issue.
If renaming small
into whatever
will return correctly marginTop: 32px
Expected behavior 🤔
Should return a valid margin for spacing based on direction.
Steps to reproduce 🕹
CodeSandbox: https://codesandbox.io/s/peaceful-https-6iewi9?file=/src/Demo.tsx
Steps:
- use custom Breakpoint
small
- use Stack spacing
Context 🔦
Look at:
Your environment 🌎
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Issue Analytics
- State:
- Created a year ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Theme.breakpoints is undefined in MUI React - Stack Overflow
Whenever I try to use theme.brekpoints.up , I always encounter the same error theme.breakpoints is undefined on console. version that I am ...
Read more >youtube-danmaku - Source code - Greasy Fork
defineProperty(spacing, 'unit', { get: function get() { return ... disableGlobal) { // We can use a shorthand class name, we never use the...
Read more >Additional Custom Breakpoints - Technical Details and Gotchas
We highly recommend testing the Additional Custom Breakpoint feature on a staging site before activating it on a production environment. We also ...
Read more >How to use breakpoints in Material UI - YouTube
Course Article:https://entryleveldeveloper.training/premium/article/andrewgbliss/how- to - use - breakpoints -in-material-uiSocial ...
Read more >https://www.sena.edu.co/es-co/ciudadano/Paginas/pr...
fixedElements.get(parent)) {\n return;\n } // if this is an implicitly ... but this is much easier and the native packages\n// might use a...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@TomFreudenberg Yes, I was able to reproduce it now. Thanks for the code snippet. Here is the CodeSandbox reproducing the issue. It looks like a bug.
Thanks for actions and infos.