如何修改MUI中TextField组件内input元素的默认内边距？

方法1：使用sx属性快速定制（推荐单个组件修改） #

直接给TextField添加sx属性，通过CSS选择器定位内部的input元素，调整内边距：

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

<TextField
  label="示例输入框"
  sx={{
    '& input': {
      padding: '8px 12px', // 自定义你需要的内边距大小
    },
    // 若需同步调整聚焦状态的内边距，可补充如下配置
    '& input:focus': {
      padding: '8px 12px',
    }
  }}
/>

方法2：用styled创建自定义组件（适合复用场景） #

如果多个页面/组件需要用到同一样式的输入框，可以封装一个自定义TextField：

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

const CustomTextField = styled(TextField)(({ theme }) => ({
  '& input': {
    padding: theme.spacing(1, 1.5), // 用主题间距更适配全局样式
  },
}));

// 使用时直接调用
<CustomTextField label="自定义输入框" />

方法3：全局主题修改（适合全项目统一调整） #

如果想让所有TextField都使用新的内边距规则，可在全局主题配置中修改：

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

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& input': {
            padding: '8px 12px',
          },
        },
      },
    },
  },
});

// 在根组件外层包裹ThemeProvider
<ThemeProvider theme={theme}>
  {/* 你的应用内容 */}
</ThemeProvider>

注意：如果使用了variant="outlined"或filled类型的输入框，可能需要同步调整对应容器的内边距（比如.MuiOutlinedInput-notchedOutline），避免输入内容与边框间距不协调。

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