[theme] Getting `styleFromPropValue` for spacing will return undefined when using custom breakpoint named small

Duplicates

• 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:

1. use custom Breakpoint small
2. use Stack spacing

Context 🔦

Look at:

https://github.com/mui/material-ui/blob/ba2fce43a735f6085e68c2d76ab746a098488862/packages/mui-material/src/Stack/Stack.js#L79-L88

https://github.com/mui/material-ui/blob/19e068343cce39c5b331fe8a9a3d647bd308aa44/packages/mui-system/src/breakpoints.js#L142

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[ZeeshanTamboli]

@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.

[TomFreudenberg]

Thanks for actions and infos.