reactjs - 如何使 Material ui 图标可点击并重定向到 url

Question

我要制作 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>

一般是怎么做的？？

Answer 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 文件。

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