如何使素材ui图标可点击并重定向到url答案

【问题标题】：How to make material ui icon clickable and redirect to url如何使素材ui图标可点击并重定向到url
【发布时间】：2020-04-13 16:11:31
【问题描述】：

我想让 GitHub 图标 <GitHubIcon /> 可点击并使其重定向到外部 url，在 api 中查看它似乎没有链接属性...https://material-ui.com/api/svg-icon/

<div className={classes.root}>
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6" className={classes.title}>
        Made with <FavoriteIcon /> by
        <a href="https://github.com/quiko"><GitHubIcon /></a>  //Not working 
      </Typography>
    </Toolbar>
  </AppBar>
</div>

一般是怎么做的？？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

添加这个：

<GitHubIcon onClick={handlePageChange} />

关于函数定义：

const handlePageChange() {
window.location.href="pagelink"
}

或直接使用箭头函数：

<GitHubIcon onClick={event =>  window.location.href='pagelink'} />

如果希望使用 Material-ui 样式添加悬停效果：

如何在 Material-UI 上添加样式：

导入makeStyles：

import { makeStyles } from '@material-ui/core/styles';

创建类：

const useStyles = makeStyles(theme => ({
  clickableIcon: {
    color: 'green',
    '&:hover': {
    color: 'yellow',
    },
  },
}));

在函数声明中添加 API 调用：

  const classes = useStyles();

并将此类添加到您的元素中：

<GitHubIcon 
onClick={event =>  window.location.href='pagelink'} 
className={classes.clickableIcon}
/>

您也可以直接使用 css 文件。

我对 css 样式而不是 material-ui api 并不满意，特别是因为这种可怕的 CSS-in-JS 语法，但它运行良好，在这里你可以找到一些文档：Material-ui Styles

【讨论】：

谢谢，它现在确实重定向到了 url，但是当鼠标悬停在它上面时仍然没有显示图标是可点击的 ..
@yuri：它确实在同一个窗口中打开了 url。无论如何，我们可以让它在新窗口中打开吗？谢谢
使用 window.open 代替 window.location：window.open('google.com', '_blank');