删除MUI编号文本字段中的箭头

Question

快速问题，如何删除数字类型的MUI文本字段中的箭头。我尝试在sx对象中添加MozApperance: 'textfield'，但它不起作用。这是我的短代码：

<TextField
disabled={disabled}
variant="standard"
sx={{ width: pageOptions?.width }}
type="number"
value={value}
/>

如果有人知道如何移除这些箭，我将非常感激

Answer 1

快速方法

sx={{
width: pageOptions?.width,
"input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": {
WebkitAppearance: "none",
margin: 0,
},
"input[type=number]": {
MozAppearance: "textfield",
},
}}

更好的方法

如果你在项目中使用了大量的数字输入(很可能你会这样做(，那么在每个项目中复制和粘贴这些样式会让你头疼
您只能在theme组件中定义这些样式一次，它将覆盖您的所有数字输入用法。

import { createTheme, experimental_sx as sx } from "@mui/material/styles";
let theme = createTheme({
components: {
MuiTextField: {
styleOverrides: {
root: sx({
"input::-webkit-outer-spin-button, input::-webkit-inner-spin-button":
{
WebkitAppearance: "none",
margin: 0,
},
"input[type=number]": {
MozAppearance: "textfield",
},
}),
},
},
},
});
export default theme;