html - Material-UI 文档中的根元素是什么意思？

Question

我对 material ui 术语感到困惑，如果有人能向我解释一下，我将不胜感激。

让我们以这个描述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.

我的理解是，本例中的根元素是 ButtonBase - 最内部的元素。 MenuItem 属性 disableRipple 中的“未记录”被“传播”到根元素 - ButtonBase。因此，属性从上到下“传播”到最内部的元素。

另一方面，当我读到这个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.

在我看来，他们所说的根是最外层的组件——我从 Material ui 使用的组件——MenuItem，而不是构建它的内部组件 (ButtonBase)。否则，它就没有任何意义，因为如果它不是真的，我将无法设置 mui 组件的样式。

因此，当他们说某些东西应用于“根”元素时，他们的意思是它应用于最外部的组件(我导入和使用的 mui 组件)或最内部的组件(在其之上 Material 的组成部分是构建)？

Answer 1

根元素是呈现宿主组件的最外层元素。这在 MUI API glossary 中有解释。 ，以及其他组件/元素:

• 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.