如何在MUI v6的type="number" TextField中通过slotProps设置min/max

对于MUI v5的TextField组件，要给number类型的输入框设置min和max属性，需要通过slotProps的正确嵌套结构传递原生input属性，你之前的写法有误，正确代码如下：

<TextField
  fullWidth
  label="Discount %"
  value={amount}
  type="number"
  slotProps={{
    input: {
      inputProps: {
        min: 0,
        max: 100
      }
    }
  }}
/>

说明： #

• slotProps.input对应的是MUI的Input组件，而Input组件的inputProps属性专门用来传递原生<input>元素的属性（比如min、max、step等）。
• 仅设置min/max只能限制输入框的滚轮调节和表单验证提示，用户仍可手动输入超出范围的数值，建议配合onChange事件做额外校验：

const handleAmountChange = (e) => {
  const inputValue = e.target.value;
  // 处理空值或非数字情况
  if (!inputValue) {
    setAmount('');
    return;
  }
  const numValue = Number(inputValue);
  // 限制在0-100之间
  if (!isNaN(numValue) && numValue >= 0 && numValue <= 100) {
    setAmount(numValue);
  }
};

// 在TextField中添加onChange
<TextField
  // 其他属性
  onChange={handleAmountChange}
/>

内容的提问来源于stack exchange，提问作者abdelrahman-assoum