如何在菜单项中显示内联图标？答案

【问题标题】：How to display inline icons in menu items?如何在菜单项中显示内联图标？
【发布时间】：2019-08-28 07:37:10
【问题描述】：

问题

这是我选择后的选择菜单。问题是图标（对话气泡内的问号）出现在与文本（“问题”）不同的行上。

图 1. 选择后的菜单。图标和文字是 display:block;

目标

我希望选择后的样式是内联显示。类似于菜单显示选项预选的方式。

图 2. 打开菜单预选。图标和文字是 display:inline;

代码

这是代码。

const typeConfig = [
    { value : 'bug'        , label : 'Bug report'      , icon : 'bug_report'      , } ,
    { value : 'positive'   , label : 'Positive review' , icon : 'thumb_up'        , } ,
    { value : 'negative'   , label : 'Negative review' , icon : 'thumb_down'      , } ,
    { value : 'question'   , label : 'Question'        , icon : 'contact_support' , } ,
    { value : 'comment'    , label : 'Comment'         , icon : 'comment'         , } ,
    { value : 'suggestion' , label : 'Suggestion'      , icon : 'feedback'        , } ,
    { value : 'request'    , label : 'Feature request' , icon : 'touch_app'       , } ,
  ]

<FormControl variant="outlined" fullWidth>
  <InputLabel ref={inputLabel} htmlFor="select">{typeLabel}</InputLabel>
  <Select
    value={type}
    onChange={handleChangeType}
    input={<OutlinedInput labelWidth={labelWidth} name="select" id="select" />}
  >
    {
      typeConfig.map( item =>
        <MenuItem key={item.value} value={item.value}>
          <ListItemIcon>
            <Icon>{item.icon}</Icon>
          </ListItemIcon>
          <Typography variant="inherit" display="inline" noWrap>{item.label}</Typography>
        </MenuItem>
    )}
  </Select>
</FormControl>

【问题讨论】：

尝试使用vertical-align: middle; 显示ListItemIcon 和Typography inline-block + 为ListItemIcon 添加宽度，以便所有Typography 对齐

标签： javascript css reactjs material-ui

【解决方案1】：

来自 cmets 的总结

我正在使用顺风。于是我成功添加了inline样式如下。

<ListItemIcon className="inline">
  <Icon>{item.icon}</Icon>
</ListItemIcon>
<Typography className="inline" variant="inherit" display="inline" noWrap>    
  {item.label}
</Typography>

【讨论】：