如何使材料 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'} />

如果希望使用材质 UI 样式在悬停时添加效果：

---

如何在材质UI上添加条纹：

导入制作样式：

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 语法，但它运行良好，在这里你可以找到一些文档： 材料用户界面样式