Material UI：从 TextView 中删除向上向下箭头旋钮

CSS

如何在 Material UI 中删除 TextView 的向上/向下箭头旋钮

在使用 Material UI 构建用户界面时，TextView 是一个常用的组件，它用于显示和编辑文本内容。然而，默认情况下，TextView 的右侧会有一个向上和向下的箭头旋钮，用于改变文本内容的值。在某些情况下，我们可能希望去除这些箭头旋钮，以满足特定的设计需求。本文将介绍如何在 Material UI 中删除 TextView 的向上/向下箭头旋钮，并提供一个案例代码。

首先，我们需要明确的是，Material UI 提供了一个名为 InputBase 的组件，它是 TextView 的基础组件。因此，我们可以通过修改 InputBase 的样式来删除向上/向下箭头旋钮。

要删除向上/向下箭头旋钮，我们需要使用 CSS 来修改 InputBase 组件的样式。具体来说，我们需要使用 CSS 的伪类选择器 ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button 来隐藏这些箭头旋钮。

下面是一个简单的示例代码，演示了如何在 Material UI 中删除 TextView 的向上/向下箭头旋钮。

Javascript
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputBase from '@material-ui/core/InputBase';
const useStyles = makeStyles((theme) => ({
  root: {
    '& input[type=number]': {
      '-moz-appearance': 'textfield',
      '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
        '-webkit-appearance': 'none',
        margin: 0,
      },
    },
  },
}));
const CustomTextView = () => {
  const classes = useStyles();
  return (
    <InputBase</p>      type="number"
      classes={{
        root: classes.root,
      }}
    />
  );
}
export default CustomTextView;

在上述代码中，我们通过 makeStyles 函数定义了一个 CSS 样式，其中使用了伪类选择器 ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button 来隐藏向上/向下箭头旋钮。然后，我们将定义的样式应用到 InputBase 组件的 root 类上，以实现删除箭头旋钮的效果。最后，我们使用 InputBase 组件来创建一个自定义的 TextView。

案例代码

上述示例代码演示了如何在 Material UI 中删除 TextView 的向上/向下箭头旋钮。你可以根据自己的需求对样式进行修改，以适应不同的设计要求。通过这种方式，我们可以自由地定制 Material UI 组件，以满足特定的界面设计需求。

在本文中，我们学习了如何在 Material UI 中删除 TextView 的向上/向下箭头旋钮。通过修改 InputBase 组件的样式，我们可以轻松地实现这一效果。使用自定义的样式，我们可以根据需要定制 Material UI 组件，以满足不同的设计要求。希望本文对你在使用 Material UI 构建用户界面时有所帮助！