Material UI: Remove up/down arrow dials from TextView

You can try css approach for that.

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

From the TextField docs, the type prop accepts valid HTML input types. I believe the reason the up and down arrows are present is because you specified number as the type.

Try type="tel" instead, as it seems to be the standard input type for phone numbers.

Here is a reference to the tel type and why it's a good idea to use it. Note that if the current browser doesn't support it, it will fall back to being a regular text field.

In React v 17.0.2 and Material-UI v 4.11.4, this works for me:

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

const useStyles = makeStyles({
  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
    }
  },
});

export default function MyComponent() {
  const classes = useStyles();
  return <TextField className={classes.input} />;
}