Question

Material-UI中的弹出式组件在不可见的顶部叠加层上呈现，该叠加层以编程方式直接附加到body。例如，当SelectField或DropDownMenu打开时：

<body>
    <div id="app-container>
        <div ...>
            <!-- This is where the SelectField is rendered. -->
        </div>
    </div>

    <div ...>
        <!-- This div is: -->
        <!-- (1) where the visible dropdown is rendered when open -->
        <!-- (2) a full-screen overlay -->
        <!-- (3) removed when the dropdown is closed -->
    </div>
</body>

此机制已到位，以便（1）用户可以“点击”关闭打开的下拉列表，（2）用户在尝试关闭打开的下拉列表时不会意外点击另一个控件。

然而，我需要允许clickaways实际点击底层元素，而不会被叠加层阻挡。这可以通过使用useLayerForClickAway prop：

在Popover组件中完成

<Popover useLayerForClickAway={false} ... >
    ...
</Popover>

不幸的是， SelectField或DropDownMenu 没有这样的选项（或者似乎存在，没有记录），我需要其中一个而不是Popover。

此外，我似乎没有找到任何允许可靠地识别下拉列表创建的覆盖元素的选项，除了在下拉列表打开后立即获取body中的最后一个元素（最好是hackish）。 Material-UI似乎也没有提供手动覆盖此overlay元素的内联样式的方法。

那么，什么是禁用不可见叠加层的“合适”方法，并在下拉列表打开时允许点击次数？

渲染SelectField的下拉部分而不使用不可见的叠加层

0 个答案: