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

我有一个非常简单的选择，当我点击菜单时，它会显示3个选项，每个选项都在一行上。但是，当我选择一个项目时，它会显示在两行上：一行是文本，另一行是图标。我怎样才能使它成为一行呢

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>
    </>
  );
}

导入“/styles.css”； 从“@material ui/icons/Edit”导入编辑图标； 从“@material ui/core/ListItemIcon”导入ListItemIcon； 从“@material ui/core/ListItemText”导入ListItemText； 从“@material ui/core/Select”导入选择； 从“@material ui/core/FormControl”导入FormControl； 从“@material ui/core/InputLabel”导入InputLabel； 从“@material ui/core/MenuItem”导入菜单项； 从“@material ui/core/FormHelperText”导入FormHelperText； 常量项=[“a”、“b”、“c”]； 导出默认函数App（）{ 返回( 请选择一个选项 {items.map（（item，idx）=>( ))} 只需要选择一些东西就可以了 ); }

---

您在.MuiListItemText根目录和.MuiListItemIcon根目录中使用flex属性，但父目录仍然具有display:block。.MuiInputBase输入的CSS应该如下所示（将

display:block；

更改为

display:flex；

）：

---

您正在.MuiListItemText根目录和.MuiListItemIcon根目录中使用flex属性，但父目录仍然具有display:block。.MuiInputBase输入的CSS应该如下所示（将

display:block；

更改为

display:flex；

）：

---

MenuItem

布局是灵活的，而

SelectInput

不是灵活的，您可以使用

classes

道具将

SelectInput

作为目标，并覆盖布局样式，如下所示：

查看所有可能要覆盖的规则名称

---

菜单项

布局是灵活的，而

选择输入

不是灵活的，您可以使用

类

道具以

选择输入

为目标，覆盖布局样式，如下所示：

查看所有可能要覆盖的规则名称

.MuiInputBase-input {
    font: inherit;
    color: currentColor;
    width: 100%;
    border: 0;
    height: 1.1876em;
    margin: 0;
    display: block;
    padding: 6px 0 7px;
    min-width: 0;
    background: none;
    box-sizing: content-box;
    animation-name: mui-auto-fill-cancel;
    letter-spacing: inherit;
    animation-duration: 10ms;
    -webkit-tap-highlight-color: transparent;
  }