材质用户界面：从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

对于 Material UI 版本 5

const Input = styled(MuiInput)(({ theme }) => ({
  "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
    display: "none",
  },
  "& input[type=number]": {
    MozAppearance: "textfield",
  },
}));

然后将其用作

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

Answer 2

这对我有用（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,
    },
  },

Answer 3

从TextField文档中，该type道具接受有效的HTML输入类型。我相信出现上下箭头的原因是因为您指定number了该类型。

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

这是对tel类型的引用，以及为什么使用它是个好主意。请注意，如果当前的浏览器不支持它，它将退回到常规的文本字段。

Answer 4

您可以尝试使用CSS方法。

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

Answer 5

Material-Ui v5 beta

    MuiInput: {
      styleOverrides: {
        root: {
          '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button':
            {
              display: 'none',
            },
          '& input[type=number]': {
            MozAppearance: 'textfield',
          },
        },
      },
    },

Answer 6

在 Reactv 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