时间戳

首页 > 解决方案 > 如何在菜单项中显示内联图标？

javascript - 如何在菜单项中显示内联图标？

问题描述

问题

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

图 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>

标签： javascriptcssreactjsmaterial-ui

解决方案

评论摘要

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

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

推荐阅读