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

Question

我对实质性的ui术语感到困惑，如果有人可以向我解释它，我将不胜感激。

以下面的描述为例：https://material-ui.com/guides/api/：

  

传播
  提供的未记录的属性会传播到根目录   元件;例如，将className属性应用于根。
  现在，假设您要禁用MenuItem上的波纹。您   可以利用传播行为：

     

disableRipple属性将在其中流动   方式：MenuItem> ListItem> ButtonBase。

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

另一方面，当我阅读此https://material-ui.com/customization/overrides/时：

  

使用类名覆盖
  覆盖组件样式的第一种方法是使用类名称。每个组件都提供一个className属性，该属性始终应用于根元素。

在我看来，根的含义是最外部的组件-我在材料ui中使用的组件-MenuItem，而不是在其上构建的内部组件（ButtonBase）。否则，这毫无意义，因为如果不是真的，我将无法为mui组件设置样式。

因此，当他们说某物被应用于“根”元素时，它们的意思是指该物被应用于最外部的组件（我导入并使用的mui组件）或最内部的组件（在其顶部）材料的组件是build）？

Answer 1

我不确定将className道具应用于内部元素（例如ButtonBase）为什么没有意义。 我认为在所有情况下，“根”都是指内部元素。

当您将className传递给MenuItem时，它将传递给ListItem组件，该组件将其传递给ButtonBase组件，该组件最终将其传递给本机button元素，从而允许要设置样式的按钮。

如有疑问，您可以检查来源，例如为MenuItem。

Answer 2

我认为root是指外部元素。

className没有明确记录任何组件，因此仅应用于root（outer）元素。但是disableRipple会传播到内部元素，因为它已明确记录在ButtonBase元素中。