[英]How to display inline icons in menu items?
Here is my select menu after selection. 选择后,这是我的选择菜单。 The problem is the icon (the question mark inside speech bubble) appears on a different line from the text ("Question").
问题是图标(气泡内的问号)出现在与文本不同的行上(“问题”)。
I want the style after selection to be an inline display. 我希望选择后的样式是嵌入式显示。 Similar to the way the menu displays the options pre-selection.
类似于菜单显示选项预选的方式。
Here's the code. 这是代码。
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>
Summary from comments 评论摘要
I'm using tailwind. 我正在使用顺风。 So I successfully added the
inline
styles as follows. 因此,我成功添加了以下
inline
样式。
<ListItemIcon className="inline">
<Icon>{item.icon}</Icon>
</ListItemIcon>
<Typography className="inline" variant="inherit" display="inline" noWrap>
{item.label}
</Typography>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.