0

I am trying to override the Panel layer styles and decrease the index to 999998 in order to achieve my div to be above the grayed layer and below the panel when Panel is opened. So I tried to override the overlayProps , but as i see there is a Layer component above the overlay that has z-index:1000000 and inherits the styles. How can i override the layer class with a proper way to achieve my case ? Please check my codepen example 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>
user1292656
  • 2,502
  • 20
  • 48
  • 68

1 Answers1

1

Panel takes another prop called layerProps that can be used to set the zIndex of the layer.

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

That said, there are still some zIndex issues with the panel overall that would need to be solved to have the text in the div show up where you'd like.

Do you want the panel the be "blocking"? If not, you might consider passing isBlocking={false} to the panel, and it would leave the entirety of the content visible.

In this example (based on yours) I added a second button to toggle the behavior of the isBlocking prop and it might also provide what you're looking for.

<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>
JD Huntington
  • 348
  • 1
  • 5