材质UI选择按钮标签出现在组件上方

Question

试图将Material UI选择组件与FormControl和InputLabel一起使用，选择的标签始终呈现在选择组件上方，而我不知道为什么。

我的代码看起来像这样

 <FormControl>
      <InputLabel htmlFor="hey">A Label</InputLabel>
      <Select inputProps={{
         id: "hey"
      }} value="Hey">
          <MenuItem value="Hey">
             Hey
          </MenuItem>
      </Select>
   </FormControl>

Answer 1

如果当前所选选项的值为空，则标签仅位于“选择”框中。否则，它需要显示所选的项目，并且标签必须不妨碍显示。在您的示例中，您的“选择”中只有一个选项，值为“ Hey”，这样一开始就会被选中并显示出来。

下面是一个示例，其中并排显示了示例Select和一个以所选空值开头的示例：

import React, { useState } from "react";
import ReactDOM from "react-dom";

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";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  }
});

function App({ classes }) {
  const [value, setValue] = useState("");
  return (
    <>
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="hey">A Label</InputLabel>
        <Select
          inputProps={{
            id: "hey"
          }}
          value="Hey"
        >
          <MenuItem value="Hey">Hey</MenuItem>
        </Select>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="hey2">A Label</InputLabel>
        <Select
          inputProps={{
            id: "hey2"
          }}
          value={value}
          onChange={event => setValue(event.target.value)}
        >
          <MenuItem value="">Empty Value for First Option</MenuItem>
          <MenuItem value="Hey">Hey</MenuItem>
        </Select>
      </FormControl>
    </>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Answer 2

在使用Material-ui public class ARPriceWorksheetMaintExtension : PXGraphExtension<ARPriceWorksheetMaint> { #region Views public PXSelectJoin<BAccount, InnerJoin<Customer, On<Customer.bAccountID, Equal<BAccount.bAccountID>>>, Where2< Where<Match<Customer, Current<AccessInfo.userName>>>, And< Where<BAccount.type, Equal<BAccountType.customerType>, Or<BAccount.type, Equal<BAccountType.combinedType>>>>>> customerCode; #endregion } 时遇到了这个问题。我更新到了最新版本（当前为v3.9.2），并为我修复了该问题。