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

2
votes

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) ?

2
htmlcssreactjsmaterial-ui

2 Answers

2
votes

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.

0
votes

In my opinion, root is referred to the outer element.

className is not explicitly documented for any component, hence it's only applied to root(outer) element. But disableRipple is spread to inner element Because it is explicitly documented for ButtonBase element.