如何降低Material UI与Formik中<Select>输入框的高度及尺寸

问题表现 #

表单中Select输入框高度比普通TextField输入框更高，效果如下：

问题原因 #

你当前仅通过小写inputProps修改原生输入框的样式，但是当TextField开启select属性时，MUI内部会渲染Select专属容器，该容器为了容纳下拉箭头默认会有更高的内边距，仅修改内部原生输入框样式无法影响外层容器高度，导致两个组件高度不一致。

解决方法 #

统一给两个组件的InputProps（大写I，作用于MUI外层Input容器）设置固定高度，同时保持内部原生输入框样式一致即可。

修改后的InputField组件代码 #

import { Field } from "formik";
import { TextField } from "formik-material-ui";

const inputInnerStyle = {
    padding: 7,
    fontSize: "0.75rem",
};

// 统一外层容器高度，可根据实际需要调整数值
const inputContainerStyle = {
    height: "38px"
};

export default (props: any) => {
    return (
        <Field
            component={TextField}
            InputProps={{
                style: inputContainerStyle,
                inputProps: {
                    style: inputInnerStyle,
                }
            }}
            size="small"
            margin="none"
            variant="outlined"
            {...props}
        >
            {props.children}
        </Field>
    );
};

修改后的Select Field组件代码 #

import { Field } from "formik";
import { TextField } from "formik-material-ui";
import { MenuItem } from "@mui/material"; // 补充缺失的MenuItem导入

const inputInnerStyle = {
    padding: 7,
    fontSize: "0.75rem",
};

// 和普通TextField保持相同的外层容器高度
const inputContainerStyle = {
    height: "38px"
};

export default (props: any) => {
    return (
        <Field
            component={TextField}
            InputProps={{
                style: inputContainerStyle,
                inputProps: {
                    style: inputInnerStyle,
                }
            }}
            select={true}
            align="left"
            size="small"
            fullWidth
            margin="none"
            variant="outlined"
            {...props}
        >
              <MenuItem value={1}>A</MenuItem>
              <MenuItem value={2}>B</MenuItem>
              <MenuItem value={3}>C</MenuItem>
        </Field>
    );
};

补充说明 #

如果不想固定外层容器高度，也可以通过SelectProps调整下拉箭头的边距，减少额外高度占用：

<Field
  // 其他属性保持不变
  SelectProps={{
    sx: {
      '& .MuiSelect-icon': {
        padding: 2, // 缩小图标内边距
      }
    }
  }}
/>

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