如何在反应工具箱菜单中使用文本而不是图标？

Question

我正在为我的网站使用反应工具箱菜单。根据文档React-toolbox menu中给出的示例，我只能使用图标作为我的菜单。我怎样才能使用菜单的文本呢？

我想做的事的例子：

当我点击作为菜单的博客文本时，将显示menuItem。

这可以吗？

Answer 1

您可以像这样将元素传递给图标属性：

<IconMenu icon={<div>Menu</div>} position='topLeft' menuRipple>

Answer 2

只需从 MenuItem 组件中删除图标属性

 <IconMenu icon={<div>blog</div>} position='topLeft' menuRipple>
  <MenuItem value='download' caption='Download' />
  <MenuItem value='help' caption='Favorite' />
  <MenuItem value='settings' caption='Open in app' />
  <MenuDivider />
  <MenuItem value='signout' icon='delete' caption='Delete' disabled />
 </IconMenu>

Answer 3

如果其他人遇到问题，解决方案是使用 Menu 组件而不是 IconMenu。像这样：

const [menuActive, setMenuActive] = useState(false);
return (
  <div style={{ position: 'relative' }}>
    <Button label='Actions' onClick={() => setMenuActive(!menuActive)} />
    <Menu position='topRight' active={menuActive} onHide={() => setMenuActive(false)}>
     <MenuItem value='download' caption='Download' />
     <MenuItem value='action' caption='Action' />
    </Menu>
  </div>
);

如何在反应工具箱菜单中使用文本而不是图标？

How to use text instead of Icon for react-toolbox menu?

javascript

web

reactjs

material-design

react-toolbox