BackButton.tsx

 1import React from 'react';
 2
 3import Button from '@material-ui/core/Button';
 4import { makeStyles } from '@material-ui/core/styles';
 5import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 6
 7const useStyles = makeStyles((theme) => ({
 8  backButton: {
 9    position: 'sticky',
10    top: '80px',
11    backgroundColor: theme.palette.primary.dark,
12    color: theme.palette.primary.contrastText,
13    '&:hover': {
14      backgroundColor: theme.palette.primary.main,
15      color: theme.palette.primary.contrastText,
16    },
17  },
18}));
19
20function BackButton() {
21  const classes = useStyles();
22
23  return (
24    <Button
25      variant="contained"
26      className={classes.backButton}
27      aria-label="back to issue list"
28      href="/"
29    >
30      <ArrowBackIcon />
31      Back to List
32    </Button>
33  );
34}
35
36export default BackButton;