How I can access to DOM node inside of withStyle component?

Question

I'm working on react project and in this project my colleagues and I are using Material UI, for some reason I wanna access to DOM node of another component that wrapped by a HOC. I used react ref for this. but I just get the withStyle object, see below:

This is my TableHead:

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 }) => (
  <MaterialTableHead {...rest}>
    <TableRow>
      {head.map(item => (
        <TableCell key={item.key} className={classes.headCell} style={{ width: item.width }}>
          {item.title}
        </TableCell>
      ))}
    </TableRow>
  </MaterialTableHead>
);

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 = () => ({
  headCell: {
    fontSize: '18px',
    color: '#0c1d38',
  },
});

export default withStyles(styles, { withTheme: true })(TableHead);

And in the Table component I wanna calculate height of TableHead component, so I use below code:

<TableHead ref={(header) => { this.header = header; }} head={head} />

and inside of componentDidMount of Table component I console.log(this.header) and just see below:

enter image description here

I seek in the web and find some GitHub issues pages and try innerRef instead of ref but it doesn't help me.

How I can access to DOM node to calculate its height?

Answer 1

What you are looking for is innerRef property. Just replace ref with innerRef.

Example:

<TableHead innerRef={(header) => { this.header = header; }} head={head} />

Source (withStyles docs):

Some implementation details that might be interesting to being aware of:

It adds a classes property so you can override the injected class names from the outside.

It adds an innerRef property so you can get a reference to the wrapped component. The usage of innerRef is identical to ref.

It forwards non React static properties so this HOC is more "transparent". For instance, it can be used to defined a getInitialProps() static method (next.js).

Reference: https://material-ui.com/customization/css-in-js/#withstyles-styles---options----higher-order-component

Answer 2

I know it’s late, but for other people which might face this problem I provide my solution, too. Material UI has a RootRef API which you can use a as HOC the case you want to get the element DOM node:

First import the component:

import React from 'react';
import RootRef from '@material-ui/core/RootRef';

Then wrap your entire element inside a RootRef component and create a React ref. But instead of adding a ref on your component and reference it to the ref like this ref={this.tableHeadRef}, you should add rootRef to the rootRef HOC and reference it to your ref like this: rootRef={this.tableHeadRef} to get the current DOM node. This can be applied to any component that uses withStyles HOC.

class MyComponent extends React.Component {
  constructor() {
    super();
    this.tableHeadRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.tableHeadRef.current); // DOM node
  }

  render() {
    return (
      <RootRef rootRef={this.tableHeadRef}>
        <TableHead />
      </RootRef>
    );
  }
}