如何在 Material UI 中正确添加图标以选择选项？答案

【问题标题】：How to properly add icon to select options in Material UI?如何在 Material UI 中正确添加图标以选择选项？
【发布时间】：2021-01-11 12:07:02
【问题描述】：

我试图为 Material UI 中的每个 Select 选项设置一个图标。我按照本问题提出的答案How can I add an icon to Material UI Select options?使用ListItemIcon和ListItemText，它确实显示了每个选项的图标，但在选择时，图标与不同行上的选项值一起显示图标。图片说明了我的意思。

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

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;

【问题讨论】：

标签： reactjs drop-down-menu material-ui

【解决方案1】：

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

【讨论】：