如何在ReactJS中隐藏数字输入MUI文本字段中的箭头

Question

我目前有一个带有一些字段的react-hook-form。其中一个字段是来自 mui/material 的

<TextFields />

（Link）。这是“数字”类型，我想隐藏数字输入中的箭头。

代码

我的

DynamicFormComponent.tsx

文件中的代码片段：

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

问题/疑问

我想去掉 TextField 右侧的箭头，但到目前为止我的方法不起作用。

我知道这种纯 html 方式是有效的，但我找不到将其转换为我的 ReactJS 组件的方法。

<input type="number" value="5" style="-webkit-appearance: none;>

。

Answer 1

你可以这样实现：

<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'
      },
    }
    }}
   
 />

Answer 2

我更喜欢用

styled-component

来做，因为它使应用程序变得干净且易于维护。它将帮助您覆盖 MUI 基本 UI 以按照您的意愿对其进行转换

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;
  }
`;

现在你可以像这样使用它了

<TextBox
    name="my name"
    label="my label"
    defaultValue={0}
    InputProps={{
        type: "number",
    }}
/>