[system] Remove custom behavior for sx={{ width: 1 }}

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

https://mui.com/system/sizing/

<Box sx={{ width: 1 }} />

feels a bit like a foot gun. I would expect 1px, not 100%. This discussion started in https://github.com/mui/mui-x/pull/5177/files#r895041464.

Examples 🌈

I would propose:

diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing.js
index 0454dfb170..c6c8920e49 100644
--- a/packages/mui-system/src/sizing.js
+++ b/packages/mui-system/src/sizing.js
@@ -3,7 +3,7 @@ import compose from './compose';
 import { handleBreakpoints, values as breakpointsValues } from './breakpoints';

 export function sizingTransform(value) {
-  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
+  return value < 1 && value > 1 ? `${value * 100}%` : value;
 }

 export const width = style({

Motivation 🔦

No response

Start with packages/mui-system/src/sizing.js and compare the current sizing behavior with the sizing documentation at mui.com/system/sizing/. Confirm the intended result for sx={{ width: 1 }} and adjust the custom transformation accordingly. Done means the value no longer receives the special percentage behavior described in the issue.