Question 266335 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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'
      },
    }
    }}
   
 />
    Login or Signup to reply.
  2. 0

    I would prefer to do it with styled-component as it makes application supper clean and easy to maintain. It would help you to override MUI base UI to transform it as you wish

    import styled from "styled-components";

const TextBox = styled(TextField)`
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
`;

    now you can use it like

    <TextBox
    name="my name"
    label="my label"
    defaultValue={0}
    InputProps={{
        type: "number",
    }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search