title: Using material components in react
body: <p>I've been following the guide for <a href="https://material-ui-1dab0.firebaseapp.com/demos/drawers/" rel="nofollow noreferrer">Material UI Beta for react</a> and want to make a simple component using the Drawer. Below is the code from the official documentation specifying how to create a Component.</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from 'material-ui/styles';
  import Drawer from 'material-ui/Drawer';
  import AppBar from 'material-ui/AppBar';
  import Toolbar from 'material-ui/Toolbar';
  import List from 'material-ui/List';
  import Typography from 'material-ui/Typography';
  import IconButton from 'material-ui/IconButton';
  import Hidden from 'material-ui/Hidden';
  import Divider from 'material-ui/Divider';
  import MenuIcon from 'material-ui-icons/Menu';
  import { mailFolderListItems, otherMailFolderListItems } from './tileData';
  
  const drawerWidth = 240;
  
  const styles = theme =&gt; ({
    root: {
      width: '100%',
      height: 430,
      marginTop: theme.spacing.unit * 3,
      zIndex: 1,
      overflow: 'hidden',
    },
    appFrame: {
      position: 'relative',
      display: 'flex',
      width: '100%',
      height: '100%',
    },
    appBar: {
      position: 'absolute',
      marginLeft: drawerWidth,
      [theme.breakpoints.up('md')]: {
        width: `calc(100% - ${drawerWidth}px)`,
      },
    },
    navIconHide: {
      [theme.breakpoints.up('md')]: {
        display: 'none',
      },
    },
    drawerHeader: theme.mixins.toolbar,
    drawerPaper: {
      width: 250,
      [theme.breakpoints.up('md')]: {
        width: drawerWidth,
        position: 'relative',
        height: '100%',
      },
    },
    content: {
      backgroundColor: theme.palette.background.default,
      width: '100%',
      padding: theme.spacing.unit * 3,
      height: 'calc(100% - 56px)',
      marginTop: 56,
      [theme.breakpoints.up('sm')]: {
        height: 'calc(100% - 64px)',
        marginTop: 64,
      },
    },
  });
  
  export class ResponsiveDrawer extends React.Component {
    state = {
      mobileOpen: false,
    };
  
    handleDrawerToggle = () =&gt; {
      this.setState({ mobileOpen: !this.state.mobileOpen });
    };
  
    render() {
      const { classes } = this.props;
  
      const drawer = (
        &lt;div&gt;
          &lt;div className={classes.drawerHeader} /&gt;
          &lt;Divider /&gt;
          &lt;List&gt;{mailFolderListItems}&lt;/List&gt;
          &lt;Divider /&gt;
          &lt;List&gt;{otherMailFolderListItems}&lt;/List&gt;
        &lt;/div&gt;
      );
  
      return (
        &lt;div className={classes.root}&gt;
          &lt;div className={classes.appFrame}&gt;
            &lt;AppBar className={classes.appBar}&gt;
              &lt;Toolbar&gt;
                &lt;IconButton
                  color="contrast"
                  aria-label="open drawer"
                  onClick={this.handleDrawerToggle}
                  className={classes.navIconHide}
                &gt;
                  &lt;MenuIcon /&gt;
                &lt;/IconButton&gt;
                &lt;Typography type="title" color="inherit" noWrap&gt;
                  Responsive drawer
                &lt;/Typography&gt;
              &lt;/Toolbar&gt;
            &lt;/AppBar&gt;
            &lt;Hidden mdUp&gt;
              &lt;Drawer
                type="temporary"
                open={this.state.mobileOpen}
                classes={{
                  paper: classes.drawerPaper,
                }}
                onRequestClose={this.handleDrawerToggle}
                ModalProps={{
                  keepMounted: true, // Better open performance on mobile.
                }}
              &gt;
                {drawer}
              &lt;/Drawer&gt;
            &lt;/Hidden&gt;
            &lt;Hidden mdDown implementation="css"&gt;
              &lt;Drawer
                type="permanent"
                open
                classes={{
                  paper: classes.drawerPaper,
                }}
              &gt;
                {drawer}
              &lt;/Drawer&gt;
            &lt;/Hidden&gt;
            &lt;main className={classes.content}&gt;
              &lt;Typography type="body1" noWrap&gt;
                {'You think water moves fast? You should see ice.'}
              &lt;/Typography&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ResponsiveDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(ResponsiveDrawer);
  </code></pre>
  
  <p>What is the best practice for specifying the props in the parent component? Should I simply specify the className for each class in the parent component directly? And what if I don't need a class name for a particular class?</p>
  
  <pre><code>class App extends Component {
    render() {
      const classes = {
        root: "bullet",
        appFrame: "card",
        ...
      };
      return (
        &lt;div className="App"&gt;
          &lt;ResponsiveDrawer classes={classes} /&gt;
  
  
  
        &lt;/div&gt;
      );
    }
  }
  </code></pre>