What is meant by root element in Material-UI documentation?

Question

I am confused by material ui terminology and will appreciate if someone could explain it to me.

Let's take, for example, this description https://material-ui.com/guides/api/ :

Spread
Undocumented properties supplied are spread to the root element; for instance, the className property is applied to the root.
Now, let's say you want to disable the ripples on the MenuItem. You can take advantage of the spread behavior:

The disableRipple property will flow this way: MenuItem > ListItem > ButtonBase.

I understand it in a way that the root element in this case is ButtonBase - the most inner element. And "undocumented" in MenuItem property disableRipple is "spread" to root element - ButtonBase. So, properties are "spread" from top to bottom - to the most inner element.

On the other hand, when I read this https://material-ui.com/customization/overrides/ :

Overriding with class names
The first way to override the style of a component is to use class names. Every component provides a className property which is always applied to the root element.

It seems to me that what they mean by root is the most outer component - the one which I use from material ui - MenuItem and not the inner one on top of which it is build (ButtonBase). Otherwise, it just makes no sense, because I wouldn't be able to style mui component if it wasn't true.

So, when they say that something is applied to the "root" element they mean that it is applied to the most outer component (the mui one which I import and use) or to the most inner component (on top of which material's component is build) ?

Answer 1

The root element is the outermost element that renders a host component. This is explained in the MUI API glossary, along with the other components/elements:

• host component: a DOM node type in the context of react-dom, e.g. a 'div'. See also React Implementation Notes.
• host element: a DOM node in the context of react-dom, e.g. an instance of window.HTMLDivElement.
• outermost: The first component when reading the component tree from top to bottom i.e. breadth-first search.
• root component: the outermost component that renders a host component.
• root element: the outermost element that renders a host component.

Answer 2

I'm not sure why it would not make sense for the className prop to be applied to the inner element (e.g. ButtonBase). I think in all cases the 'root' is referring to the inner element.

When you pass className to MenuItem, it will get passed to the ListItem component, which will pass it on to the ButtonBase component, which will finally pass it on to the native button element, allowing the button to be styled.

If in doubt you can check the source, e.g. for MenuItem.