我想在使用MUI數字字段時刪除上下箭頭。我用的是5.3.0版本。在sx道具中可能嗎？

sx道具

<TextField
  sx={{...}}
  id="outlined-number"
  label="Number"
  type="number"     
/>

在文檔中，type prop接受有效的HTML輸入類型。我相信出現上下箭頭的原因是因為您指定了number作為類型。

Try type = & quot電話& quot相反，因為它似乎是電話號碼的標準輸入類型。

這里有一個關于tel類型的參考，以及為什么使用它是一個好主意。請注意，如果當前的瀏覽器不支持它，它將退回到常規文本字段

我在這里找到了這個答案: 如何從mui數字字段中刪除上下箭頭？

首先將類名添加到NumberField組件

<NumberField className="no-spinners" />

這對我有用。(CSS方法)

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

您可以創建自己的自定義樣式:

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customNumberField: {
    '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
    '& input[type="number"]': {
      '-moz-appearance': 'textfield',
    },
  },
});

function MyComponent() {
  const classes = useStyles();

  return (
    <TextField
      className={classes.customNumberField}
      label="Number"
      type="number"
      // other props
    />
  );
}