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>
          {this.props.text}
        </Card>
      </div>
    );
  }
}

export default withStyles(styles)(Post);

import * as React from 'react';


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

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

  render() {
    return <div style={{ margin: '20px', border: '5px solid' }}>{this.props.text}</div>;
  }
}

--- 
+++ 
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import Card from 'material-ui/Card';
+import { withStyles } from 'material-ui/styles';
 
 
 interface Props {
@@ -7,13 +9,41 @@
   channelName: string;
 }
 
-export default class Post extends React.Component < any, any > {
+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', border: '5px solid' }}>{this.props.text}</div>;
+    return (
+      <div style={{ margin: '20px' }}>
+        <Card>
+          {this.props.text}
+        </Card>
+      </div>
+    );
   }
 }
+
+export default withStyles(styles)(Post);
Change Card component to cool ui
