如何删除Material-UI数字类型TextField的上下调节箭头？

之前写法不生效、组件尺寸异常的核心原因 #

• 代码结构错误：把createMuiTheme嵌套在makeStyles的回调内部，语法逻辑完全不对，根本没有触发主题覆盖的实际效果
• 选择器定位偏差：之前把伪元素样式写到了Input组件的root外层容器类上，选不到内部真正的原生<input>节点，自然覆盖不了浏览器默认的数字调节箭头样式
• 尺寸变大的问题：自定义样式越界覆盖了MUI small尺寸预设的input内边距、高度规则，没有做到只针对调节箭头伪元素写样式，改动了input本身的布局属性

单组件局部实现（无全局污染、不破坏尺寸预设） #

这种写法只对当前绑定的TextField生效，不会影响其他输入组件，也不会打乱small尺寸的布局：

1. 编写样式规则，所有自定义样式只作用于调节箭头对应的伪元素，不触碰input本身的布局属性：

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
  hideSpinArrows: {
    // 隐藏Webkit内核（Chrome、Edge等）的数字调节箭头
    '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
      WebkitAppearance: 'none',
      margin: 0,
    },
    // 兼容Firefox浏览器的隐藏规则
    MozAppearance: 'textfield',
  }
});

2. 把类名精准绑定到InputProps的input规则上——这个类是直接对应MUI渲染出的原生input节点的：

const classes = useStyles();
<TextField
  size="small"
  type="number"
  InputProps={{
    classes: {
      input: classes.hideSpinArrows
    }
  }}
/>

因为所有自定义规则都只作用于箭头伪元素，完全没有修改small尺寸预设的input高度、内边距、字体大小属性，自然不会出现组件异常变大的问题。

全局统一配置方案 #

如果需要让应用内所有数字类型TextField都默认隐藏调节箭头，不用每个组件单独绑定类，可以在应用根层级的自定义主题里做精准覆盖，注意不要把样式写到root类上：

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      // 定位到内部input节点，而非外层包裹容器
      input: {
        '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
          WebkitAppearance: 'none',
          margin: 0,
        },
        MozAppearance: 'textfield',
      }
    }
  }
});
// 把ThemeProvider套在应用最外层，配置就会全局生效

避坑提醒 #

• 不要直接写全局的input[type=number]原生选择器来做覆盖：这类选择器的优先级低于MUI注入的带类名的样式，很难实际生效，还可能意外影响应用内其他原生数字输入框
• 自定义样式尽量只针对伪元素编写，不要随意修改input本身的内边距、高度属性，避免破坏MUI自带的尺寸预设规则

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