如何将图标正确添加到 Material UI 中的 select 选项？

Question

我试图为 Material UI 中的每个 Select 选项设置一个图标。我使用 ListItemIcon 和 ListItemText 遵循了这个问题中提出的答案，它确实显示了每个选项的图标，但是，当 selected 时，图标显示在旁边不同行上的选项值。图片显示了我的意思。

当我 select 一个选项时，我该怎么做才能使文本显示在一行中而不显示图标？我将在此处附上我用于参考的代码。

import React, { useState } from "react";
import {
  Box,
  Select,
  MenuItem,
  ListItemIcon,
  ListItemText,
} from "@material-ui/core";
import ShortTextIcon from "@material-ui/icons/ShortText";
import SubjectIcon from "@material-ui/icons/Subject";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    textAlign: "center",
  },
});

function App() {
  const classes = useStyles();

  const [state, setState] = useState("");

  const handleChange = (e) => {
    setState(e.target.value);
  };

  return (
    <Box component="div" className={classes.root}>
      <Select value={state} onChange={handleChange}>
        <MenuItem value="First Choice">
          <ListItemIcon>
            <ShortTextIcon />
          </ListItemIcon>
          <ListItemText primary="First Choice" />
        </MenuItem>
        <MenuItem value="Second Choice">
          <ListItemIcon>
            <SubjectIcon />
          </ListItemIcon>
          <ListItemText primary="Second Choice" />
        </MenuItem>
      </Select>
    </Box>
  );
}

export default App;

Answer 1

您可以使用 Select API 的 renderValue 属性它允许您呈现任何您想要的带有签名的值：function(value: any) => ReactNode 其中 value 是select 的当前 select 值。（仅当 native 属性为 false 时才能使用）

如何将图标正确添加到 Material UI 中的 select 选项？

How to properly add icon to select options in Material UI?

drop-down-menu

reactjs

material-ui