如何为Material UI的TextField输入框与标签同时设置内边距？

你使用的是variant="standard"类型的TextField，这个变体的结构里，标签（InputLabel）和输入框同属.MuiInput-root内部容器，直接给TextField组件设置padding只会作用于外层容器，无法影响内部标签的布局。要让两者同时获得上下内边距，可以按以下方式修改：

方案：针对内部输入根容器设置内边距 #

在TextField的sx属性中，通过CSS选择器定位到.MuiInput-root并设置padding，这样标签和输入框会被统一包含在有内边距的区域内：

<TextField
  sx={{
    '& .MuiInput-root': {
      padding: '20px 0',
    },
  }}
  name="mail"
  label="Email"
  type="email"
  id="mail"
  placeholder="Enter email"
  variant="standard"
  inputProps={{
    sx: { fontSize: "13px" }
  }}
  InputLabelProps={{
    shrink: true,
    sx: { fontSize: "12px" }
  }}
/>

补充说明 #

如果需要更精细的布局控制，也可以分别调整标签和输入框的间距：

• 在InputLabelProps.sx中添加marginTop和marginBottom来调整标签的上下间距
• 在inputProps.sx中添加paddingTop和paddingBottom来调整输入框的内边距

不过第一种方案更简洁，能保证标签和输入框的布局同步。

内容的提问来源于stack exchange，提问作者Sueda Çiçekli