import * as React from 'react';
import Card, { CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import { withStyles } from 'material-ui/styles';


interface Props {
  userName: string;
  text: string;
  channelName: string;
}

const styles = theme => ({
  card: {
    minWidth: 275,
  },
  title: {
    marginBottom: 16,
    fontSize: 14,
    color: theme.palette.text.secondary,
  },
});

class Post extends React.Component < any, any > {
  constructor(props) {
    super(props);
    this.props = props;
  }

  render() {
    return (
      <div style={{ margin: '20px' }}>
        <Card style={{ padding: '10px' }}>
          <CardContent>
            <Typography>
              {this.props.channel}
              {this.props.user}
            </Typography>
            <Typography>
              {this.props.text}
            </Typography>
          </CardContent>
        </Card>
      </div>
    );
  }
}

export default withStyles(styles)(Post);

import * as React from 'react';
import Card from 'material-ui/Card';
import { withStyles } from 'material-ui/styles';


interface Props {
  userName: string;
  text: string;
  channelName: string;
}

const styles = theme => ({
  card: {
    minWidth: 275,
  },
  bullet: {
    display: 'inline-block',
    margin: '0 2px',
    transform: 'scale(0.8)',
  },
  title: {
    marginBottom: 16,
    fontSize: 14,
    color: theme.palette.text.secondary,
  },
  pos: {
    marginBottom: 12,
    color: theme.palette.text.secondary,
  },
});

class Post extends React.Component < any, any > {
  constructor(props) {
    super(props);
    this.props = props;
  }

  render() {
    return (
      <div style={{ margin: '20px' }}>
        <Card style={{ padding: '10px' }}>
          {this.props.text}
        </Card>
      </div>
    );
  }
}

export default withStyles(styles)(Post);

--- 
+++ 
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Card from 'material-ui/Card';
+import Card, { CardContent } from 'material-ui/Card';
+import Typography from 'material-ui/Typography';
 import { withStyles } from 'material-ui/styles';
 
 
@@ -13,18 +14,9 @@
   card: {
     minWidth: 275,
   },
-  bullet: {
-    display: 'inline-block',
-    margin: '0 2px',
-    transform: 'scale(0.8)',
-  },
   title: {
     marginBottom: 16,
     fontSize: 14,
-    color: theme.palette.text.secondary,
-  },
-  pos: {
-    marginBottom: 12,
     color: theme.palette.text.secondary,
   },
 });
@@ -39,7 +31,15 @@
     return (
       <div style={{ margin: '20px' }}>
         <Card style={{ padding: '10px' }}>
-          {this.props.text}
+          <CardContent>
+            <Typography>
+              {this.props.channel}
+              {this.props.user}
+            </Typography>
+            <Typography>
+              {this.props.text}
+            </Typography>
+          </CardContent>
         </Card>
       </div>
     );
Add typography for unity theme
