如何移除Material UI v5 Outlined TextField的内部白色内边距边框

你遇到的白色空隙是因为仅给输入框本身设置了背景色，外层的.MuiOutlinedInput-root容器自带的内边距区域默认是白色背景，就形成了视觉上的白色边框。字号适配问题是因为你给输入框强制设置了padding:0!important，和large尺寸的输入框默认尺寸不匹配。

修改方案如下：

第一步：调整样式代码 #

// Material-Ui styles 无需额外写全局CSS
export const useStyles = makeStyles({
    OutlinedTextField: {
        "& .MuiOutlinedInput-root": {
            // 直接给根容器设置背景，覆盖整个输入框区域
            backgroundColor: "#F5F5F5",
            fontSize: "13px",
            "& fieldset": {
                borderColor: "#949595",
                borderWidth: 1.5,
            },
            "&:hover fieldset": {
                borderColor: "#949595",
            },
            "&.Mui-focused": {
                // 聚焦时根容器背景变黄
                backgroundColor: "#FFFF80",
                "& fieldset": {
                    borderColor: "#949595",
                    boxShadow: "0 5px 5px 0px #949595",
                },
                "& .MuiOutlinedInput-input": {
                    backgroundColor: "transparent",
                }
            },
        },
        "& .MuiOutlinedInput-input": {
            // 保留large尺寸输入框的默认内边距，可根据需求微调
            padding: "16.5px 14px",
            backgroundColor: "transparent",
            outline: "none",
        },
    }
});

第二步：简化TextField组件写法 #

<TextField
    {...params}
    type="text"
    size="large"
    variant="outlined"
    fullWidth
    className={classes.OutlinedTextField}
    InputProps={{
        ...params.InputProps,
    }}
/>

修改后整个输入框区域的背景由根容器统一控制，常态为灰色、聚焦为黄色，不会出现中间的白色空隙，13px字号和输入框内边距适配，不会出现文字偏移问题。

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