Skip to content

🎉 Material UI v5 is out! Head to the migration guide to get started.

RootRef API

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

Import

import RootRef from '@material-ui/core/RootRef';
// or
import { RootRef } from '@material-ui/core';

You can learn more about the difference by reading this guide.

⚠️⚠️⚠️ If you want the DOM element of a Material-UI component check out FAQ: How can I access the DOM element? first.

This component uses findDOMNode which is deprecated in React.StrictMode.

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

It's highly inspired by https://github.com/facebook/react/issues/11401#issuecomment-340543801. For example:

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

function MyComponent() {
  const domRef = React.useRef();

  React.useEffect(() => {
    console.log(domRef.current); // DOM node
  }, []);

  return (
    <RootRef rootRef={domRef}>
      <SomeChildComponent />
    </RootRef>
  );
}

@deprecated

Props

Name Type Default Description
children* element The wrapped element.
rootRef* refType.isRequired A ref that points to the first DOM node of the wrapped element.

The component cannot hold a ref.