title: How I can access to DOM node inside of withStyle component?
body: <p>I'm working on <code>react</code> project and in this project my colleagues and I are using <code>Material UI</code>, for some reason I wanna access to <code>DOM node</code> of another component that wrapped by a <code>HOC</code>. I used  react <code>ref</code> for this. but I just get the <code>withStyle</code> object, see below:</p>
  
  <p>This is my <code>TableHead</code>:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import { TableHead as MaterialTableHead, TableRow } from '@material-ui/core';
  import TableCell from './TableCell';
  
  const TableHead = ({ classes, head, ...rest }) =&gt; (
    &lt;MaterialTableHead {...rest}&gt;
      &lt;TableRow&gt;
        {head.map(item =&gt; (
          &lt;TableCell key={item.key} className={classes.headCell} style={{ width: item.width }}&gt;
            {item.title}
          &lt;/TableCell&gt;
        ))}
      &lt;/TableRow&gt;
    &lt;/MaterialTableHead&gt;
  );
  
  TableHead.propTypes = {
    classes: PropTypes.object.isRequired,
    head: PropTypes.arrayOf(PropTypes.shape({
      key: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
      width: PropTypes.string,
      render: PropTypes.func,
    })).isRequired,
  };
  
  TableHead.defaultProps = {};
  
  const styles = () =&gt; ({
    headCell: {
      fontSize: '18px',
      color: '#0c1d38',
    },
  });
  
  export default withStyles(styles, { withTheme: true })(TableHead);
  </code></pre>
  
  <p>And in the <code>Table</code> component I wanna calculate height of <code>TableHead</code> component, so I use below code:</p>
  
  <pre><code>&lt;TableHead ref={(header) =&gt; { this.header = header; }} head={head} /&gt;
  </code></pre>
  
  <p>and inside of <code>componentDidMount</code> of <code>Table</code> component I <code>console.log(this.header)</code> and just see below:</p>
  
  <p><a href="https://i.stack.imgur.com/wVhAW.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>I seek in the web and find some <code>GitHub</code> issues pages and try <code>innerRef</code> instead of <code>ref</code> but it doesn't help me.</p>
  
  <p>How I can access to DOM node to calculate its height?</p>