ReactJS中如何隐藏MUI TextField数字输入框的箭头

你当前的问题出在样式应用的层级不对——把appearance相关样式直接加在TextField组件的style上，只会作用于组件的外层容器，而不会影响内部的原生<input>元素，所以无效。

给你两种可行的解决方法：

方法一：通过InputProps直接给内部input加样式 #

把样式配置到InputProps的style属性中，这样样式会直接应用到原生input元素上：

<TextField
    name="my name"
    label="my label"
    defaultValue={0}
    InputProps={{
        type: "number",
        style: {
            WebkitAppearance: "none",
            appearance: "none",
            MozAppearance: "none",
        },
    }}
/>

方法二：用CSS类名（适合样式复用） #

如果需要在多个输入框复用这个样式，推荐用CSS类：
先定义全局或模块化样式：

.no-spinner-input::-webkit-outer-spin-button,
.no-spinner-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinner-input[type=number] {
    -moz-appearance: textfield;
}

然后在TextField的InputProps中指定类名：

<TextField
    name="my name"
    label="my label"
    defaultValue={0}
    InputProps={{
        type: "number",
        className: "no-spinner-input",
    }}
/>

原理很简单：纯HTML里你是把样式直接加在<input>标签上，而MUI的TextField是封装组件，InputProps就是用来传递内部输入元素属性和样式的入口，把样式放在这里才能命中目标元素。

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