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

时间:2020-06-02 03:25:24

标签: asp.net reactjs asp.net-mvc material-ui

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

Drop down not at the center

这是我的代码

                          <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 />

1 个答案:

答案 0 :(得分: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>
  );
}