如何在临时抽屉中使用字符串名称指定按钮图标 Material UI

Question

大家好，我是一个新手，正在尝试制作 material UI 临时抽屉，默认情况下 onClick 事件的值是一个字符串，我不知道如何实现将其转换为图标。

return (
    <div>
        {['Home'].map((anchor) => (
            <React.Fragment key={anchor}>
                <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
                <SwipeableDrawer
                    anchor={anchor}
                    open={state[anchor]}
                    onClose={toggleDrawer(anchor, false)}
                    onOpen={toggleDrawer(anchor, true)}
                >
                    {list(anchor)}
                </SwipeableDrawer>
            </React.Fragment>
        ))}
    </div>
);

如您所见：“HOME”是一个字符串，网站上显示的 UI 只是“HOME”这个按钮。我如何格式化代码，以便“HOME”按钮不会显示字符串，而是显示图标。我会使用 Material UI 图标中的 MenuIcon 来代替它。谢谢！！

Answer 1

您可以使用 Icon 组件并将字符串传递给子道具。在此之前，记得将 material icon 字体添加到您的 html 文件

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

import IconButton from "@material-ui/core/IconButton";
import Icon from "@material-ui/core/Icon";

...

{["home", "star", "add_circle"].map((name) => (
  <IconButton>
    <Icon>{name}</Icon>
  </IconButton>
))}

如何在临时抽屉中使用字符串名称指定按钮图标 Material UI

How to specify button Icon using string name in Temporary drawer Material UI

navigation

user-interface

reactjs

material-design

material-ui

现场演示