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

Question

我有一个非常简单的 select，当我单击菜单时，它会显示 3 个选项，每个选项都在一行中。但是，当我 select 一个项目时，它显示在 2 行上：1 行用于文本，另一行用于图标。我怎样才能让它成为一行？

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

Answer 1

您在 .MuiListItemText-root 和 .MuiListItemIcon-root 中使用了 flex 属性，但父级仍然有 display: 块。 .MuiInputBase-input 的 CSS 应该如下所示（将 display: block; 更改为 display: flex;）：

.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;
  }

Answer 2

MenuItem 布局是 flex，而 SelectInput 不是，您可以使用 classes 道具定位 SelectInput 并像这样覆盖布局样式：

查看所有可能的规则名称以覆盖 here。

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

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

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

Make selected item fit on one line, not two

javascript

css

reactjs

material-ui

jss

现场演示