0

パネルを開いたときに div が灰色のレイヤーの上にあり、パネルの下にあるようにするために、パネルレイヤースタイルをオーバーライドし、インデックスを 999998 に減らしようとしています。だから私は overlayProps をオーバーライドしようとしましたが、私が見るように、z-index:1000000 を持ち、スタイルを継承するオーバーレイの上に Layer コンポーネントがあります。私の場合を達成するための適切な方法でレイヤークラスをオーバーライドするにはどうすればよいですか? コードペンの例を確認してください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

PanellayerPropsレイヤーの zIndex を設定するために使用できる別のプロップを呼び出します。

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

とは言っても、パネル全体にまだいくつかの zIndex の問題があり、div 内のテキストを希望の場所に表示するには解決する必要があります。

パネルを「ブロック」しますか? そうでない場合は、isBlocking={false}パネルに渡すことを検討すると、コンテンツ全体が表示されたままになります。

この例(あなたのものに基づく) では、isBlockingプロップの動作を切り替える 2 つ目のボタンを追加しました。探しているものも提供される可能性があります。

<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 に答える