title: TypeError: classes are undefined ReactComponent. Material-kit-react
body: <p>I am trying to do a little example from material-kit, in own project, but I Can not make it work. The problem that I Have is in the render when I did </p>
  
  <blockquote>
    <p>const { classes, ...rest } = this.props;</p>
  </blockquote>
  
  <p>Never works causes classes are undefined. Debugging I find that I haven't got my Object Header, then the function __objectWithStyles, never works because in this.props are not be the object Header.</p>
  
  <p>Can someone help me? </p>
  
  <p>My LoginPage.jsx</p>
  
  <pre><code> import React from "react";
  // material-ui components
  import withStyles from "@material-ui/core/styles";
  // core components
  import Header from "components/Header/Header.jsx";
  import HeaderLinks from "components/Header/HeaderLinks.jsx";    
  import loginPageStyle from "assets/jss/material-kit-react/views/loginPage.jsx";
  
   class LoginPage extends React.Component {
  
  
   constructor(props) {
      super(props);
      // we use this to make the card to appear after the page has been rendered
      this.state = {
        cardAnimaton: "cardHidden"
      };
    }
    componentDidMount() {
      // we add a hidden class to the card and after 700 ms we delete it and the transition appears
      setTimeout(
        function() {
          this.setState({ cardAnimaton: "" });
        }.bind(this),
        700
      );
    }
    render() {
      const { classes, ...rest } = this.props;
      return (
        &lt;div&gt;
          &lt;Header
            absolute
            color="transparent"
            brand="Material Kit React"
            rightLinks={&lt;HeaderLinks /&gt;}
            {...rest}
          /&gt;
          &lt;div
            className={classes.pageHeader}
            style={{
              backgroundImage: "url(" + image + ")",
              backgroundSize: "cover",
              backgroundPosition: "top center"
            }}
          &gt;
      );
      }
  </code></pre>
  
  <p>export withStyles(loginPageStyle)(LoginPage);
          }</p>
  
  <p>The HeaderPage.jsx</p>
  
  <pre><code>import React from "react";
  // nodejs library that concatenates classes
  import classNames from "classnames";
  // nodejs library to set properties for components
  import PropTypes from "prop-types";
  // material-ui components
  import withStyles from "material-ui/styles/withStyles";
  import AppBar from "material-ui/AppBar";
  import Toolbar from "material-ui/Toolbar";
  import IconButton from "material-ui/IconButton";
  import Button from "material-ui/Button";
  import Hidden from "material-ui/Hidden";
  import Drawer from "material-ui/Drawer";
  // @material-ui/icons
  import Menu from "@material-ui/icons/Menu";
  // core components
  import headerStyle from "assets/jss/material-kit-react/components/headerStyle.jsx";
  
  class Header extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        mobileOpen: false
      };
      this.handleDrawerToggle = this.handleDrawerToggle.bind(this);
      this.headerColorChange = this.headerColorChange.bind(this);
    }
    handleDrawerToggle() {
      this.setState({ mobileOpen: !this.state.mobileOpen });
    }
    componentDidMount() {
      if (this.props.changeColorOnScroll) {
        window.addEventListener("scroll", this.headerColorChange);
      }
    }
    headerColorChange() {
      const { classes, color, changeColorOnScroll } = this.props;
      const windowsScrollTop = window.pageYOffset;
      if (windowsScrollTop &gt; changeColorOnScroll.height) {
        document.body
          .getElementsByTagName("header")[0]
          .classList.remove(classes[color]);
        document.body
          .getElementsByTagName("header")[0]
          .classList.add(classes[changeColorOnScroll.color]);
      } else {
        document.body
          .getElementsByTagName("header")[0]
          .classList.add(classes[color]);
        document.body
          .getElementsByTagName("header")[0]
          .classList.remove(classes[changeColorOnScroll.color]);
      }
    }
    componentWillUnmount() {
      if (this.props.changeColorOnScroll) {
        window.removeEventListener("scroll", this.headerColorChange);
      }
    }
    render() {
      const {
        classes,
        color,
        rightLinks,
        leftLinks,
        brand,
        fixed,
        absolute
      } = this.props;
      const appBarClasses = classNames({
        [classes.appBar]: true,
        [classes[color]]: color,
        [classes.absolute]: absolute,
        [classes.fixed]: fixed
      });
      const brandComponent = (
        &lt;Button href="#" className={classes.title}&gt;
          {brand}
        &lt;/Button&gt;
      );
      return (
        &lt;AppBar className={appBarClasses}&gt;
          &lt;Toolbar className={classes.container}&gt;
            {leftLinks !== undefined ? brandComponent : null}
            &lt;div className={classes.flex}&gt;
              {leftLinks !== undefined ? (
                &lt;Hidden smDown implementation="css"&gt;
                  {leftLinks}
                &lt;/Hidden&gt;
              ) : (
                brandComponent
              )}
            &lt;/div&gt;
            &lt;Hidden smDown implementation="css"&gt;
              {rightLinks}
            &lt;/Hidden&gt;
            &lt;Hidden mdUp&gt;
              &lt;IconButton
                color="inherit"
                aria-label="open drawer"
                onClick={this.handleDrawerToggle}
              &gt;
                &lt;Menu /&gt;
              &lt;/IconButton&gt;
            &lt;/Hidden&gt;
          &lt;/Toolbar&gt;
          &lt;Hidden mdUp implementation="css"&gt;
            &lt;Drawer
              variant="temporary"
              anchor={"right"}
              open={this.state.mobileOpen}
              classes={{
                paper: classes.drawerPaper
              }}
              onClose={this.handleDrawerToggle}
            &gt;
              &lt;div className={classes.appResponsive}&gt;
                {leftLinks}
                {rightLinks}
              &lt;/div&gt;
            &lt;/Drawer&gt;
          &lt;/Hidden&gt;
        &lt;/AppBar&gt;
      );
    }
  }
  
  Header.defaultProp = {
    color: "white"
  };
  
  Header.propTypes = {
    classes: PropTypes.object.isRequired,
    color: PropTypes.oneOf([
      "primary",
      "info",
      "success",
      "warning",
      "danger",
      "transparent",
      "white",
      "rose",
      "dark"
    ]),
    rightLinks: PropTypes.node,
    leftLinks: PropTypes.node,
    brand: PropTypes.string,
    fixed: PropTypes.bool,
    absolute: PropTypes.bool,
    // this will cause the sidebar to change the color from
    // this.props.color (see above) to changeColorOnScroll.color
    // when the window.pageYOffset is heigher or equal to
    // changeColorOnScroll.height and then when it is smaller than
    // changeColorOnScroll.height change it back to
    // this.props.color (see above)
    changeColorOnScroll: PropTypes.shape({
      height: PropTypes.number.isRequired,
      color: PropTypes.oneOf([
        "primary",
        "info",
        "success",
        "warning",
        "danger",
        "transparent",
        "white",
        "rose",
        "dark"
      ]).isRequired
    })
  };
  
  export default withStyles(headerStyle)(Header);
  </code></pre>
  
  <p>There a link from the src repository: <a href="https://github.com/creativetimofficial/material-kit-react/" rel="nofollow noreferrer">https://github.com/creativetimofficial/material-kit-react/</a></p>
  
  <p><strong>Updated</strong></p>
  
  <p>It seems that my class LoginPagte can not find the components that I import. For example.</p>
  
  <blockquote>
    <p>import Header from "components/Header/Header.jsx";</p>
  </blockquote>
  
  <p>My class can not find <strong>Header object</strong></p>