文本未在材质 UI 核心中的选择下拉列表中心垂直对齐

Question

请看图片。文本不像表单中的其他文本框字段那样在文本框的中心对齐

下拉不在中心

这是我的代码

<FormControl style={{ width: "80%" }} size="small">
<InputLabel
htmlFor="Implementation Status"
style={{ marginLeft: 10 }}
>
Implementation Status
</InputLabel>
<Select
labelId="Implementation Status"
name="name"
onChange={handleChange("Status")}
defaultValue={values.Status}
variant="outlined"
inputProps={{
id: "Implementation Status",
name: "age"
}}
>
<MenuItem value="Implemented">Implemented</MenuItem>
<MenuItem value="Implementation in Progress">
Implementation in Progress
</MenuItem>
<MenuItem value="Not Implemented">Not Implemented</MenuItem>
</Select>
</FormControl>
<br />
<br />

Answer 1

检查这个

import React from "react";
import "./styles.css";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
export default function App() {
return (
<div className="App">
<FormControl style={{ width: "80%" }} size="small">
<InputLabel id="Implementation-Status" style={{ marginLeft: 10,top:"50%",transform:"translate(0,-50%" }}>
Implementation Status
</InputLabel>
<Select
labelId="Implementation-Status"
name="name"
variant="outlined"
inputProps={{
id: "Implementation Status",
name: "age"
}}
>
<MenuItem value="Implemented">Implemented</MenuItem>
<MenuItem value="Implementation in Progress">
Implementation in Progress
</MenuItem>
<MenuItem value="Not Implemented">Not Implemented</MenuItem>
</Select>
</FormControl>
</div>
);
}