如何在菜单项中显示嵌入式图标？

Question

问题

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

图1.选择后的菜单。显示图标和文本：

目标

我希望选择后的样式为嵌入式显示。类似于菜单显示选项预选的方式。

图2.打开菜单预选择。显示图标和文本：内联；

代码

这是代码。

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>

Answer 1

评论摘要

我正在使用顺风。因此，我成功添加了inline样式，如下所示。

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