在打开反应材料UI背景时，如何使背景组件无法访问？

Question

当材料UI

Backdrop

组件正在使用时，网站中的元素仍可访问，例如，通过Tab

可以很容易地在forficialdemo

中看到，或者通过使用此信息很容易看到CodeSandbox：

我在平原上经历了某些问题，例如tabindex -1不适用于儿童元素

和

如何使一堆无法从键盘访问，许多元素使用

JS

或visibility: hidden建议。 。但是，我想知道是否有方法可以防止其他组件访问，但仍然可见。

您可以尝试使用

display: none

风格。
    

Answer 1

pointer-events: none;

属性与

open

一起用作元素是否应无法访问的指标。

有两种方法可以实现所需的效果 - 允许可见元素，但通过

Answer 2

或

mouse

.

可见。

最简单的方法是使用

keyboard

tabIndex="-1"

但如问题所述，对于许多分为不同的文件和组件的儿童元素来说，它是不可行的，因此我想出使用

// ...other JS codes
return (
  {/* ...other HTML codes */}
  <div>
    <div>
      <button tabIndex={open ? -1 : 0}>Button A</button>
    </div>
    <div>
      <button tabIndex={open ? -1 : 0}>Button B</button>
    </div>
    <div>
      <button tabIndex={open ? -1 : 0}>Button C</button>
    </div>
  </div>
);

。

inert

对于那些与

// ...other JS codes
return (
  {/* ...other HTML codes */}
  <div inert={open}>
    <div>
      <button>Button A</button>
    </div>
    <div>
      <button>Button B</button>
    </div>
    <div>
      <button>Button C</button>
    </div>
  </div>
);

一起使用

React的人，请检查以下问题：

使用`inert'属性与typescript

.。