如何使实质性ui图标可点击并重定向到url

Question

我想使GitHub图标PGADMIN_LISTEN_PORT=5432 可点击，并使其重定向到外部url，在api中查找似乎没有链接属性的{... {3}}

<GitHubIcon />

通常如何做？

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语法i，但效果很好，在这里您会找到一些文档：Material-ui Styles