如何在 Material UI 和 formik 中减小 Material-UI<Select> 输入字段的高度和大小？答案

【问题标题】：How to reduce height and size of Material-UI<Select> input field in Material UI & formik?如何在 Material UI 和 formik 中减小 Material-UI<Select> 输入字段的高度和大小？
【发布时间】：2021-09-08 11:22:16
【问题描述】：

我正在使用React、Material、Formik、formik-material-ui 制作一个网络项目。

这是我的表单的输入屏幕。选择输入高度大于文本字段输入。

InputField组件如下：

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

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

export default (props: any) => {
    return (
        <Field
            component={TextField}
            inputProps={{
                style: TextFieldStyle,
            }}
            size="small"
            margin="none"
            variant="outlined"
            {...props} // add props at the key to override any user defined similar props
        >
            {props.children}
        </Field>
    );
};

Select Field组件如下：

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

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

export default (props: any) => {
    return (
        <Field
            component={TextField}
            inputProps={{
                style: SelectFieldStyle,
            }}
            type="text"
            select={true}
            align="left"
            size="small"
            fullWidth
            margin="none"
            variant="outlined"
            {...props} // add props at the key to override any user defined similar props
        >
              <MenuItem value={1}>A</MenuItem>
              <MenuItem value={2}>B</MenuItem>
              <MenuItem value={3}>C</MenuItem>
        </Field>
    );
};

在 Select 组件中更改样式不会带来任何视觉上的变化。

如何使选择组件与输入字段的高度相同？

【问题讨论】：

标签： reactjs material-ui material-design formik formik-material-ui

【解决方案1】：

因此尝试在您的 Select 字段上使用 SelectProps：

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

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

export default (props: any) => {
    return (
        <Field
            component={TextField}
            SelectProps={{
                style: SelectFieldStyle,
            }}
            type="text"
            select={true}
            align="left"
            size="small"
            fullWidth
            margin="none"
            variant="outlined"
            {...props} // add props at the key to override any user defined similar props
        >
              <MenuItem value={1}>A</MenuItem>
              <MenuItem value={2}>B</MenuItem>
              <MenuItem value={3}>C</MenuItem>
        </Field>
    );
};

这是 API 的链接：https://material-ui.com/api/text-field/

【讨论】：