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

IT技术 javascript css reactjs material-ui jss
2021-04-28 19:20:43

我有一个非常简单的选择，当我单击菜单时，它会显示 3 个选项，每个选项都在一行上。但是，当我选择一个项目时，它显示在 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

2个回答

该MenuItem布局的弯曲，而SelectInput不是，您可以针对SelectInput使用classesprops和覆盖这样的布局样式：

在此处查看要覆盖的所有可能的规则名称。

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

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

现场演示

编辑 67030656/make-selected-item-fit-on-line-not-two#67030695

您在 .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;
  }
其它你可能感兴趣的问题
上一篇通过绘画使表面看起来像石头？ 下一篇Node.js 需要与 React.js 导入