材质UI：从TextView中删除向上/向下箭头

Question

我在Material UI中有这个TextView：

<TextField
      id="contact phone number"
      label="Contact phone number"
      type="number"
      value={this.state.contactPhoneNumber}
      onChange={this.handleChange('contactPhoneNumber')}
      placeholder="Contact phone number"
      margin="normal"
/>

看起来像这样：

如何从TextView中删除向上和向下箭头？

Answer 1

从TextField docs开始，type道具接受有效的HTML输入类型。我认为上下箭头存在的原因是因为您指定了number作为类型。

请尝试使用type="tel"，因为它似乎是电话号码的标准输入类型。

这是一个reference to the tel type，为什么使用它是个好主意。请注意，如果当前浏览器不支持它，它将回退为常规文本字段。

Answer 2

您可以尝试使用css方法。

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

Answer 3

在 React v 17.0.2 和 Material-UI v 4.11.4 中，这对我有用：

input: {
    '& input[type=number]': {
        '-moz-appearance': 'textfield'
    },
    '& input[type=number]::-webkit-outer-spin-button': {
        '-webkit-appearance': 'none',
        margin: 0
    },
    '& input[type=number]::-webkit-inner-spin-button': {
        '-webkit-appearance': 'none',
        margin: 0
    }
},

我刚刚将 classes.input 作为 className 传递给 TextField

Answer 4

这对我有用（css帮助：https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp）

input: {
    background: theme.palette.secondary.main,
    border: `1px solid white`,
    flex: 1,
    padding: '8px',
    '&[type=number]': {
      '-moz-appearance': 'textfield',
    },
    '&::-webkit-outer-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
    '&::-webkit-inner-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
  },