如何移除MUI数字类型TextField中的箭头？

要去掉MUI数字输入框的默认箭头，需要针对不同浏览器的默认样式进行覆盖，你之前的问题出在样式作用对象和属性拼写错误上，具体解决方法如下：

• 修正属性拼写：你写的MozApperance是错误的，火狐浏览器对应的正确属性是-moz-appearance
• 覆盖webkit内核浏览器（Chrome、Edge等）的默认箭头样式，需要隐藏两个特定伪元素
• 将样式应用到TextField内部的input元素上，而非容器节点

修改后的代码：

<TextField
  disabled={disabled}
  variant="standard"
  sx={{
    width: pageOptions?.width,
    // 针对input元素设置基础样式
    '& input[type="number"]': {
      '-moz-appearance': 'textfield',
      '-webkit-appearance': 'none',
    },
    // 隐藏webkit浏览器的上下箭头伪元素
    '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    }
  }}
  type="number"
  value={value}
/>

这样就能同时隐藏Chrome、Edge、Firefox等主流浏览器的数字输入框箭头了。

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