如何自定义MUI TextField的上下微调按钮样式？

要实现你需要的黑色背景、白色箭头且放大的微调按钮效果，可通过MUI的样式覆盖能力，针对webkit内核的微调按钮伪元素设置以下CSS属性，以下是具体实现方案：

组件内局部自定义（sx属性） #

直接在TextField组件上通过sx属性覆盖样式，适合单个组件定制：

import TextField from '@mui/material/TextField';

export default function CustomNumberInput() {
  return (
    <TextField
      type="number"
      label="自定义微调按钮"
      sx={{
        '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
          // 移除浏览器默认样式，开启自定义权限
          '-webkit-appearance': 'none',
          margin: 0,
          // 设置黑色背景
          backgroundColor: '#000',
          // 调整按钮尺寸实现放大效果
          width: '24px',
          height: '50%',
          // 定位按钮到右侧，避免遮挡输入内容
          position: 'absolute',
          right: '4px',
          // 将默认深色箭头反转成白色
          filter: 'invert(1)',
          // 可选：添加圆角优化外观
          borderRadius: '2px',
        },
        // 给输入框添加右侧内边距，防止内容被按钮遮挡
        '& input': {
          paddingRight: '32px',
        }
      }}
    />
  );
}

全局样式自定义（ThemeProvider） #

如果需要所有数字类型的TextField都应用该样式，可通过MUI主题配置全局覆盖：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const customTheme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
            '-webkit-appearance': 'none',
            margin: 0,
            backgroundColor: '#000',
            width: '24px',
            height: '50%',
            position: 'absolute',
            right: '4px',
            filter: 'invert(1)',
            borderRadius: '2px',
          },
          '& input': {
            paddingRight: '32px',
          }
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <TextField type="number" label="全局自定义微调按钮" />
    </ThemeProvider>
  );
}

补充：适配Firefox浏览器 #

Firefox需要单独针对其微调按钮伪元素设置样式，可在上述样式中添加：

& input::-moz-number-spin-up, & input::-moz-number-spin-down {
  background-color: #000;
  color: #fff;
  width: 24px;
  height: 50%;
}

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