使所选项目适合一行，而不是两行

我有一个非常简单的选择，当我单击菜单时，它会显示 3 个选项，每个选项都在一行上。但是，当我选择一个项目时，它会显示为 2 行：第一行用于文本，另一行用于图标。我该如何使它成为一根线？

import "./styles.css";
import EditIcon from "@material-ui/icons/Edit";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Select from "@material-ui/core/Select";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";

const items = ["a", "b", "c"];

export default function App() {
  return (
    <>
      <FormControl>
        <InputLabel>Please select an option</InputLabel>
        <Select required defaultValue="hi" fullWidth>
          {items.map((item, idx) => (
            <MenuItem key={idx} value={item}>
              <ListItemText primary={item} />
              <ListItemIcon>
                <EditIcon />
              </ListItemIcon>
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>Just select something already</FormHelperText>
      </FormControl>
    </>
  );
}

https://codesandbox.io/s/brave-stallman-9brmk?file=/src/App.js https://codesandbox.io/s/brave-stallman-9brmk?file=/src/App.js

The MenuItem布局是弹性的，而SelectInput不是，你可以瞄准SelectInput using classesprops 并覆盖布局样式，如下所示：

查看所有可能要覆盖的规则名称here https://material-ui.com/api/select/#css.

<Select classes={{ select: classes.root }}

const useStyles = makeStyles({
  root: {
    display: "flex",
    alignItems: "center"
  }
});

现场演示