调整MUI TextField高度后标签无法垂直居中的解决咨询

要解决缩小TextField高度后标签错位的问题，核心是同步调整输入框内边距与标签的定位参数，而不是仅修改输入框高度。MUI的Outlined样式标签依赖top和transform属性定位，直接改输入框高度会破坏原有布局逻辑，下面是具体调整方案：

修改思路 #

1. 不直接设置.MuiOutlinedInput-input的height，而是通过减小上下内边距（paddingTop/paddingBottom）缩小整体高度，保证输入内容自然居中。
2. 同步调整.MuiInputLabel-outlined的top和transform属性，适配缩小后的输入框高度，同时区分聚焦/非聚焦两种状态的标签位置。
3. 调整边框容器.MuiOutlinedInput-notchedOutline的内边距，避免标签与边框重叠。

修改后的Email TextField代码 #

<Box sx={{marginTop: "3rem"}}> 
    <TextField type="Email"
               label="Email"
               variant="outlined"
               value={loginEmail ? loginEmail : ""}
               name="Email"
               onChange={(e) => {
                   setloginEmail(e.target.value);
               }}
               sx={{
                  width: "100%",
                  maxWidth: "400px",
                  marginBottom: "0.5rem",
                  background: "transparent",
                  // 整体缩小4px，默认高度48改为44
                  height: 44,
                  color: "#aaa",
                  "& .MuiInputLabel-outlined": {
                    color: "#aaa !important",
                    // 非聚焦状态：垂直居中于输入框
                    top: "50%",
                    transform: "translate(-14px, -50%) scale(1)",
                    // 聚焦状态：标签上移到边框上方，适配新高度
                    "&.Mui-focused": {
                      top: "0",
                      transform: "translate(-14px, -50%) scale(0.75)",
                    }
                  },
                  "& .MuiOutlinedInput-notchedOutline": {
                    borderColor: "#ccc",
                    // 调整边框内边距匹配输入框高度
                    paddingTop: 1,
                    paddingBottom: 1,
                  },
                  "& .MuiOutlinedInput-input": {
                    color: "#aaa",
                    // 减小上下内边距缩小输入区域
                    paddingTop: 8,
                    paddingBottom: 8,
                  },
                  "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
                    borderColor: "#946bde",
                  },
                }}
                inputProps={{
                  style: {
                    color: "#aaa",
                  },
                }}
              />
    {/* 密码输入框可参照上述方式同步调整，图标按钮的自定义transform可移除 */}
</Box>

关键说明 #

• 整体高度通过height:44设置（默认48，缩小4px），配合输入框内边距调整，保证内容和标签垂直居中。
• 标签的translate(-14px, -50%)中，-14px是默认水平偏移量，保留该值可避免标签左偏，仅通过-50%实现垂直居中。
• 聚焦状态下重新设置top:0和缩放比例，确保标签能正确停靠在边框上方，不会错位。

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