Search code examples
reactjsmaterial-uitextfield

How to hide the Arrows from a number input MUI TextField in ReactJS

I currently have a react-hook-form with some fields. One field is a <TextFields /> from mui/material (Link). This one is of type "number" and I want to hide the arrows from the number input.

Code

Code snippets from my DynamicFormComponent.tsx file:

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

Problem / Question

I want to get rid of the arrows on the right side of the TextField but my approach so far doesn't work.

I know that this pure html way works, but I can't find a way to convert that to my ReactJS component. <input type="number" value="5" style="-webkit-appearance: none;>.

Picture of the arrows I want to hide

Solution

  • You can achieve this like so:

    <TextField
    name="my name"
    label="my label"
    defaultValue={0}
    InputProps={{
        type: "number",
 sx: {
    '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
        display: 'none'
     },
     '& input[type=number]': {
        MozAppearance: 'textfield'
      },
    }
    }}
   
 />