Aww yeah, Material-UI v4 is here!

RootRef API

The API documentation of the RootRef React component. Learn more about the properties and the CSS customization points.

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

Helper component to allow attaching a ref to a wrapped element to access the underlying DOM element.

It's highly inspired by For example:

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

class MyComponent extends React.Component {
  constructor() {
    this.domRef = React.createRef();

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

  render() {
    return (
      <RootRef rootRef={this.domRef}>
        <SomeChildComponent />


Name Type Default Description
children * element The wrapped element.
rootRef * union: func |
Provide a way to access the DOM node of the wrapped element. You can provide a callback ref or a React.createRef() ref.