如何减小物料UI & formik中物料UI<Select>输入字段的高度和大小？
如何减小物料UI & formik中物料UI<Select>输入字段的高度和大小？
提问于 2021-09-08 11:22:17
我正在做一个使用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>
);
};选择字段组件如下所示：
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 component中更改样式不会带来任何视觉更改。
如何使选择组件的高度与输入字段相同？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-08 11:53:36
尝试在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>
);
};下面是该接口的链接：https://material-ui.com/api/text-field/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69102102
复制相关文章
相似问题
腾讯云开发者
