自定义@mui TextField数字输入框箭头样式的技术求助

1. 先隐藏原生数字输入框箭头（跨浏览器兼容） #

浏览器原生的数字输入框箭头样式无法统一控制，第一步先把它们全部隐藏，才能自定义箭头：

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const CustomNumberTextField = styled(TextField)(({ theme }) => ({
  '& input[type="number"]': {
    // 隐藏Chrome/Safari原生箭头
    '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
      WebkitAppearance: 'none',
      margin: 0,
    },
    // 隐藏Firefox原生箭头
    MozAppearance: 'textfield',
  },
}));

2. 添加自定义箭头并确保始终显示 #

用MUI的InputAdornment搭配图标按钮实现自定义箭头，完全控制显示状态，非hover时也能正常显示：

import { useState } from 'react';
import { IconButton, InputAdornment } from '@mui/material';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

export default function CustomNumberInput() {
  const [value, setValue] = useState(0);

  const handleIncrement = () => setValue(prev => prev + 1);
  const handleDecrement = () => setValue(prev => prev - 1);

  return (
    <CustomNumberTextField
      type="number"
      value={value}
      onChange={(e) => setValue(Number(e.target.value))}
      variant="outlined"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <IconButton size="small" onClick={handleIncrement} style={{ padding: 4 }}>
                <KeyboardArrowUpIcon fontSize="small" />
              </IconButton>
              <IconButton size="small" onClick={handleDecrement} style={{ padding: 4 }}>
                <KeyboardArrowDownIcon fontSize="small" />
              </IconButton>
            </div>
          </InputAdornment>
        ),
      }}
    />
  );
}

3. 复刻Base UI NumberInput的样式 #

调整输入框和箭头的细节样式，贴近Base UI的视觉效果：

const CustomNumberTextField = styled(TextField)(({ theme }) => ({
  '& .MuiOutlinedInput-root': {
    // 聚焦/hover时的边框颜色
    '&:hover fieldset': {
      borderColor: theme.palette.primary.main,
    },
    '&.Mui-focused fieldset': {
      borderColor: theme.palette.primary.main,
    },
    // 给右侧箭头留出空间，避免输入内容被遮挡
    '& input': {
      paddingRight: '48px',
    },
  },
  '& input[type="number"]': {
    '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
      WebkitAppearance: 'none',
      margin: 0,
    },
    MozAppearance: 'textfield',
  },
}));

关键注意点 #

• 之前用& .MuiInputBase-root无效，是因为TextField的样式层级问题：如果用outlined变体，核心样式在MuiOutlinedInput-root下，需对应修改目标类名；用filled/standard变体则对应MuiFilledInput-root/MuiInput-root。
• 自定义箭头完全脱离浏览器原生样式，所以能保证跨浏览器显示一致。

内容的提问来源于stack exchange，提问作者Sims