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

Question

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

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

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字段组件如下：

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 组件中的样式不会带来任何视觉变化。

如何使 select 组件与输入字段高度相同？

Answer 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>
    );
};

这是 link 到 API：https://material-ui.com/api/text-field/

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

How to reduce height and size of Material-UI<Select> input field in Material UI & formik?

reactjs

material-design

material-ui

formik

formik-material-ui