Reactjs.NET - Props is undefined and stuck on why? - reactjs

Question

So i'm still finding my feet with reactjs.net + asp.net core. I've imported latest version (v1) of material-ui.com into the mix. I am trying to combine the two but having issues with classes/props composition.
The code below is verbatim of what i've been told i need and found via hours of searching online. Yet, this.props.classes continue to throw undefined errors.
Is there a step i'm missing?
import React, { Component } 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 Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
const homeStyles = {
root: {
height: 200 ,
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
export class Home extends React.Component {
displayName = Home.name
constructor(props) {
super(props);
console.log("Props: " + props != null);
}
render() {
const { classes } = this.props;
return (
<div>
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton style={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" style={classes.grow}>Undefined? {(this.props == undefined).toString()}</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
</div>
);
}
}
Home.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(homeStyles)(Home)