MUI Input设置min与max属性后无法实现全宽的问题咨询

给NumberField组件加上MUI内置的fullWidth属性即可，既能保留min和max的数值限制，又能让输入框占满父容器宽度：

<NumberField
  min={0}
  max={100}
  fullWidth
  label="请输入数值"
  // 其他所需属性
/>

如果fullWidth属性未生效（比如自定义了特殊父容器布局），可以通过sx属性强制设置宽度为100%：

<NumberField
  min={0}
  max={100}
  sx={{ width: '100%' }}
  label="请输入数值"
/>

问题原因说明 #

当同时给输入框设置min和max时，浏览器或MUI内部的布局逻辑会根据这两个值的位数自动估算输入框的「预期宽度」，导致输入框没有自动拉伸至父容器全宽。显式设置全宽属性，会覆盖这种自动计算行为，强制输入框占满可用空间。

内容的提问来源于stack exchange，提问作者Jamie Hutber