如何在菜單項中顯示嵌入式圖標？

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>