0

我正在尝试覆盖面板图层样式并将索引减少到 999998，以便在打开面板时使我的 div 位于灰色图层上方和面板下方。所以我试图覆盖 overlayProps ，但正如我所见，覆盖层上方有一个 Layer 组件，它具有 z-index:1000000 并继承了样式。如何以正确的方式覆盖图层类来实现我的案例？请检查我的 codepen 示例http://codepen.io/mariosch/pen/dyGYEQG

<div>
  <div style={{zIndex: 999999}}>Should be above overlay and below side panel</div>
  <DefaultButton text="Open panel" onClick={openPanel} />
  <Panel
    headerText="Sample panel"
    isOpen={isOpen}
    onDismiss={dismissPanel}
    // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
    closeButtonAriaLabel="Close"
    overlayProps={{ styles: { root: { zIndex: 999998 }}}}
  >
    <p>Content goes here.</p>
  </Panel>
</div>
4

1 回答 1

1

Panel采用另一个名为的道具layerProps，可用于设置图层的 zIndex。

layerProps={{ styles: { root: { zIndex: 999998 }}}}

也就是说，整个面板仍然存在一些 zIndex 问题，需要解决这些问题才能使 div 中的文本显示在您想要的位置。

你想让面板“阻塞”吗？如果没有，您可能会考虑传递isBlocking={false}给面板，它会使整个内容可见。

在这个例子中（基于你的）我添加了第二个按钮来切换isBlocking道具的行为，它也可能提供你正在寻找的东西。

<Panel
        isOpen={isOpen}
        isBlocking={false} // <-- this makes the rest of the content on the page visible and interactive
        onDismiss={togglePanel}
      >
        <p>Content goes here.</p>
      </Panel>
于 2020-06-09T20:26:56.407 回答