text: import React from 'react'
  import PropTypes from 'prop-types'
  import { withStyles } from '@material-ui/core/styles'
  import AppBar from '@material-ui/core/AppBar'
  import Toolbar from '@material-ui/core/Toolbar'
  import Typography from '@material-ui/core/Typography'
  import { Link } from 'gatsby'
  
  const styles = {
    root: {
      flexGrow: 1,
    },
    flex: {
      flexGrow: 1,
    }
  }
  
  const Header = ({ classes, siteTitle }) => (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="title" color="inherit" className={classes.flex}>
            <Link style={{ textDecoration: 'none', color:'inherit' }} to="/">{siteTitle}</Link>
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  )
  Header.propTypes = {
    classes: PropTypes.object.isRequired,
  }
  
  export default withStyles(styles)(Header)
  // export default Header
  